Javascript CSS global ändern

[Henry]

Hallo,

mit JS kann ich zwar einzelne Elemente stylemäßig ändern, aber kann ich auch die Styleangabe global unkompliziert mit JS ändern?

zb.

<style>
.xy{color:red;}
</style>

Wie kann ich nun per JS sagen, dass bei der CLASS xy zb. color:blue; oder sogar was einfügen was noch gar nicht drin ist, font-weight:bold;

Gruss
Henry

[Matthias Apsel]

Hallo Henry,

mit JS kann ich zwar einzelne Elemente stylemäßig ändern, aber kann ich auch die Styleangabe global unkompliziert mit JS ändern?

styleElement.textContent += ".xy {\
  color: blue;\
}";

styleElement musst du natürlich im DOM noch suchen oder erzeugen.

Wir nutzen aus, dass später gemachte Deklarationen derselben Spezifität frühere überschreiben.

Ungetestet.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Henry

mit JS kann ich zwar einzelne Elemente stylemäßig ändern

Kannst du, solltest du aber nicht.

Wie kann ich nun per JS sagen, dass bei der CLASS xy zb. color:blue; oder sogar was einfügen was noch gar nicht drin ist, font-weight:bold;

Warum willst du das mit JavaScript tun?

LLAP 🖖

[Christian Kruse]

Hallo Henry,

es gibt die CSSStyleSheet API, mit der kannst du Regeln anpassen, hinzufügen und löschen. Das SELF-Wiki hat auch zwei Artikel, habe sie aber nicht gelesen und kann also über ihren Inhalt wenig sagen.

Freundliche Grüße,
Christian Kruse

[Matthias Scharwies]

Servus!

Hallo,

mit JS kann ich zwar einzelne Elemente stylemäßig ändern, aber kann ich auch die Styleangabe global unkompliziert mit JS ändern?

zb.

<style>
.xy{color:red;}
</style>

Wie kann ich nun per JS sagen, dass bei der CLASS xy zb. color:blue; oder sogar was einfügen was noch gar nicht drin ist, font-weight:bold;

Wenn Du nicht bestehende Klassen mit classList hinzufügen willst, kannst du die Klassen ändern:

• JavaScript/Tutorials/Stylesheets_dynamisch_ändern

oder mit CSSStyleDeclaration.setProperty die Eigenschaft setzen.

Gruss
Henry

Herzliche Grüße

Matthias Scharwies