nicht angemeldet
Gunnar Bittersmann@@kultursprung
Ich habe eine Testseite, auf der dynamisch durch JavaScript 4 CSS Elemente geändert werden sollen.
Du änderst 4 Eigenschaften eines Elements: des div mit der ID "inhalt".
Zwei von den vier funktionieren:
font-size und width
font-size gibst du für h3 und p in em an, also bezogen auf das Elternelement "inhalt". Wenn du bei diesem die Schriftgröße änderst, ändern sich also auch die (absoluten) Schriftgrößen bei h3 und p.
Für width machst du weder für h3 noch p Angaben; die sind also so breit wie das Elternelement "inhalt" jeweils ist.
Zwei funktionieren nicht:
Line-height und font-family
D.h. funktioniert nicht ist nicht ganz korrekt. Sie funktionieren auf der h3 Überschrift „Was ist eigentlich lorem ipsum?“ (in grün etwa in der Mitte der Seite) aber nicht auf den p Tags.
Für h3 wird im Stylesheet weder line-height noch font-family gesetzt, damit wird beides vom Elternelement "inhalt" geerbt. Änderungen bei diesem schlagen also auf h3 durch.
Anders bei p: dafür werden im Stylesheet line-height und font-family gesetzt. Es gelten also diese Werte, nicht die vom Elternelement "inhalt". Die kannst du ändern wie du willst, p behält seine eigenen.
Wenn ich das Stylesheet der Seite rausnehme, dann geht es.
Klar, dann erbst ja p auch die Werte vom Elternelement "inhalt".
* * *
Und noch eine nicht unwichtige Bemerkung: Es ist (so gut wie) nie sinnvoll, CSS-Eigenschaften direkt mit JavaScript zu ändern.
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.