Neulich hatte ich das Problem, dass ich in einem Javascript-Programm die Farbe eine Div’s von rot auf grün ändern wollte. Kling einfach und es ist auch einfach, wenn man sich mit JavaScript auskennt.

jQuery enthält eine Funktion namens “toggleClass()“, die die Klassen-Attribute eines HTML-Elements austauscht. Ich habe nach einer ähnlichen Funktion in ES6 gesucht, aber keine gefunden. Florian Brinkmann (“@FloBrinkmann“) hat mich auf die Funktion “classList.toggle()” hingewiesen, die genau das macht, was ich gesucht habe (versteckt im “Examples”-Absatz).

Hier ist die naive Lösung meines Problems:

function toggleClass(element, className1, className2) {
  element
    .classList
    .toggle(className1);
  element
    .classList
    .toggle(className22);
}
 
toggleClass(myDiv, 'red', 'green');

Die jQuery-Implementierung enthält die Möglichkeit, mehrere Klassen zum Element hinzuzufügen oder zu entfernen. Mit einem neuen ES6-Element (dem spread-Operator) kann man dieses Feature implementieren:

function toggleClass(element, ...classNames) {
  classNames.forEach((className) => {
    element
      .classList
      .toggle(className);
  })
}

const myDiv = document.getElementById('myDiv');
toggleClass(myDiv, 'red', green', 'yellow');

jQuerys “toggleClass()” hat noch einige weitere Funktionen, die ich momentan allerdings nicht benötige. Für den Anfang reicht das erstmal.

_{(Photo by SLON V KASHE on Unsplash)}