molily: Fragen zu: CSS Angaben mit Javascript verändern.

Beitrag lesen

SELF-Forum

Fragen zu: CSS Angaben mit Javascript verändern.

molily Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo, Sandra,

  1. wie lager ich das folgende in eine bzw zwei funktionen aus?
    onMouseover="this.style.background='#F3E6FF';" onMouseout="this.style.background='#C383B1';"
    versuch mit
    function changeon() {this.style.background='#F3E6FF';}
    und aufruf mit
    onMouseover="changeon()"
    ist gescheitert. offensichtlich. bei dem beispiel ist eine auslagerung zwar nicht nötig, aber wenn man mehr auf einmal verändern möchte.

Wenn du »this« innerhalb eines Event-Attributs benutzt, weist es auf das Elementobjekt, welches den Event ausgelöst hat, also das Element, welches das Attribut enthält. Dadurch ist es möglich, direkt dessen style-Objekt anzusprechen. Wenn du jedoch eine Funktion aufrufst - ob aus einem script-Element oder einem Event-Attribut - und darin »this« verwendest, bezieht es sich in der Regel auf das window-Objekt, da eine Funktion meist eine Methode (Funktionsobjekt) dieses Objekts ist.

Folglich musst du die Referenz auf das Elementobjekt, deren Hintergrundfarbe geändert werden soll, der Funktion übergeben, damit sie dort zur Verfügung steht. Dies kann durch einen Parameter gelöst werden:

function xover (obj) {
 obj.style.background='#F3E6FF'
}
function xout (obj) {
 obj.style.background='#C383B1';
}

Sowie:

<p onmouseover="xover(this)" onmouseout="xout(this)">blafasel</p>

Falls du übrigens Links beim Überfahren mit der Maus hervorheben willst, ist JavaScript unnötig, das lässt sich auch mit CSS lösen: http://selfhtml.teamone.de/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus.

Grüße,
Mathias

Beitrag melden
–
Informationen zu den Bewertungsregeln