Styles, Attribute und Klassen

Styles

Styles setzen

Um Styles auf Elementen direkt zu setzen, können wir das style-Attribut nutzen, mit welchem wir dann Zugriff auf jedes CSS-Property haben, jedoch in CamelCase-Schreibweise.

btn.style.backgroundColor = '#37383d';
btn.style.width = '2rem';

Diese Styles werden als Inline-Styles gesetzt und überschreiben somit alle Regeln ausser die, die mit !important markiert sind.

Styles auslesen

Um nun auf alle Style-Properties eines Elements zuzugreifen, müssen wir die Methode getComputedStyle() nutzen:

console.log(getComputedStyle(btn).color);
console.log(getComputedStyle(btn).height);

CSS-Variablen

Wir können auch die Werte der CSS-Variablen verändern oder CSS-Variablen neu erstellen , indem wir das gesamte Dokument auswählen:

document.documentElement.style.setProperty('--color-primary', 'orangered');

Attribute

Attribute auslesen

Für Standard-Attribute können wir einfach unser Element nutzen und dann darauf zugreifen:

console.log(logo.alt);
console.log(logo.src);
console.log(logo.className);

Für Nicht-Standard-Attribute müssen wir die Methode getAttribute() nutzen:

console.log(logo.getAttribute('designer'));

Attribute setzen

Das Attribut setzen funktioniert ebenfalls über die Properties des HTML-Elements:

logo.alt = 'Beautiful minimalist logo';
logo.setAttribute('company', 'Bankist');

Klassen

Bei den Klassen haben wir essenziell vier Methoden, um einem Element Klassen hinzuzufügen, zu entfernen, umzuschalten und zu überprüfen, ob sie bereits angewandt wird:

logo.classList.add('c');
logo.classList.remove('c');
logo.classList.toggle('c');

console.log(logo.classList.contains('c'));
console.log(logo.classList.contains('nav__logo'));