Changing Classes

Changing classes

Die beste Methode, CSS per JavaScript zu ändern, ist durch das einfügen oder wegnehmen einer Klasse.

Element.classList.add('className');

Jedes Element besitzt die Eigenschaft classList, die wiederum über die Methoden add, remove, contains und toggle verfügt.

Note

Bei Verwendung dieser Methoden schreibt man nur den Namen der Klasse, ohne .!

const paragraph = document.querySelector('p');

// adding classes
paragraph.classList.add('red');

// removing classes
paragraph.classList.remove('red');

// toggling a class (adding and removing alternately, depending on the current state)
paragraph.classList.toggle('red');

// checking if a class exists
paragraph.classList.contains('red');

if (paragraph.classList.contains('red')) {
  console.log("I found a red box!");
}

Es ist möglich, mehrere Klassen auf einmal hinzuzufügen oder zu entfernen. Die Klassen werden dann durch Beistriche getrennt. Nötig ist es aber kaum.