Stylesheet Änderungen direkt im StyleElement alternative für setProperty()

[Rolf B]

Hallo Matthias,

Ansonsten ist (wenn meine Glaskugel stimmt) CSSStyleSheet.insertRule das, wonach du nicht gefragt hast.

Stimmt, hat er nicht. Er möchte eine vorhandene Rule ändern.

Dafür muss man das CSSRule-Objekt aus der CSSRuleList heraussuchen und darin dann das style-Objekt manipulieren. Trivial ist das nicht, weil man über alle Stylesheets iterieren muss, darin über alle CSSRules laufen, die mit type=CSSRule.STYLE_RULE herausfinden, den Selektor abfragen, und hoffen, dass es nicht mehr als eine Rule mit dem gleichen Selektor gibt.

Ich würde davon abraten, sowas zu tun. Ein custom property (a.k.a. CSS Variable) bietet einen wesentlich klarer definierbaren Punkt, um Style-Werte zu ändern. Die Frage, ob das Ändern von Style-Rules per JS eine gute Praxis ist, kann man sicher auch diskutieren.

Und dann frag ich mich noch eins:

style.setProperty('color', 'blue');

Habe gerade keine Zeit mehr zum Probieren, aber da gibt's doch auch eine direktere Schnittstelle, oder?. Kann man nicht auch

style.color = 'blue';
//oder
style['color'] = 'blue';

schreiben?

Rolf