Setting and getting CSS properties

Manchmal muss CSS mit JavaScript verändert werden – d.h. direkt, nicht über eine Klasse. Wir können CSS-Properties abfragen, hinzufügen und löschen.

Setting CSS

Um einen neuen Wert zu einer CSS Eigenschaft hinzuzufügen, gibt es zwei Möglichkeiten.

die Eigenschaft style siehe MDN
die Methode setProperty des CSSStyleProperties Objekts.

style property

Die Eigenschaft style eines HTML-Elements gibt den inline Style eines Elements in Form eines live CSSStyleProperties Objekts zurück. (Auf dieses Objekt kommen wir gleich zurück …)
Obwohl style eigentlich read-only ist (in dem Sinn, dass das CSSSTyleProperties Objekt nicht ersetzt werden kann), kann man damit direkt CSS-Eigenschaften hinzufügen bzw. ändern.

Element.style.cssProperty = propertyValue;

button.style.backgroundColor="lavender";
button.style.color="rebeccapurple";

setProperty Methode

setProperty() ist eine Methode des oben angesprochenen CSSStyleProperties Objekts. Die Methode akzeptiert zwei Argumente, Eigenschaft und Wert. Der Unterschied zu style alleine ist, dass damit auch Custom properties verändert werden können. Die Argumente sind immer Strings, daher Anführungszeichen nicht vergessen.

Element.style.setProperty('property', 'value');

button.style.setProperty('background-color', 'lavender');
button.style.setProperty('color', 'rebeccapurple');
button.style.setProperty('--box-color', 'lavender');

Getting CSS

Wenn wir CSS-Eigenschaften mit JavaScript abfragen wollen, haben wir zwei Möglichkeiten, je nachdem, welche Styles zur Verfügung stehen.

Getting inline styles

Inline styles fragen wir ebenfalls mit der Eigenschaft style ab.

const myProperty = Element.style.property;

const fontSize = button.style.fontSize;
const color = button.style.color;

Getting computed styles

Wenn wir Styles benötigen, die im CSS-Dokument stehen, müssen wir die computed styles abfragen. Das geht mit der Methode getComputedStyle(). Die Methode akzeptiert zwei Argumente: Das Element und ein Pseudoelement. Das Element muss zuerst selektiert werden. Das Pseudoelement kann weggelassen werden, wenn kein Pseudoelement ausgewählt ist bzw. keine Styles davon benötigt werden.

const style = getComputedStyle(Element, pseudoElement);

const paragraph = document.querySelector('p');
const pStyles = getComputedStyle(paragraph, '::before');
console.log(pStyles);

getComputedStyles gibt ein Objekt zurück, in dem jede CSS-Eigenschaft und der zugehörige Wert aufgelistet sind. In den DevTools aind diese Styles unter Computed zu sehen.
Da wir nicht alle Styles brauchen, müssen wir im nächsten Schritt die benötigten Werte aus dem getComputedStyles Objekt auslesen. Dazu schreiben wir die Eigenschaft in CamelCase.

const color = pStyles.color;
const backgroundColor = pStyles.backgroundColor;

Getting styles from pseudo elements

Um Werte aus einem Pseudoelement abzufragen, müssen wir getComputedStyles ein zweites Argument mitgeben: einen String des Pseudoelements:

const pseudoElementStyle = getComputedStyle(element, '::before');
const backgroundColorPseudoElement = pseudoElementStyle.backgroundColor;