DOM
Een lijst met CSS-klassen manipuleren

Een eenvoudige methode om een klasse aan een element toe te voegen, is deze aan het einde van de eigenschap className toe te voegen. Dit voorkomt geen dubbele klassennamen en spaties moeten tussen klassennamen worden ingevoegd.

document.getElementById("link1").className += " foo";
document.getElementById("link2").className += " foo bar";

Voor meerdere elementen moet u de klassennamen in een lus toevoegen

var els = document.getElementsByClassName("foo"),
  indx = els.length;
while (indx--) {
  els[indx].className += " bar baz";
}

Een enkele klassenaam kan als een string worden toegevoegd. Gebruik de spread-operator van ES6 om meerdere klassennamen toe te voegen:

document.querySelector("#link1").classList.add("foo");
document.querySelector("#link2").classList.add(...['foo', 'bar']);

Voor meerdere elementen moet u de klassennamen in een lus toevoegen

document.querySelectorAll(".foo").forEach(el => {
  el.classList.add(...['bar', 'baz']);
});

Het verwijderen van een klasse uit een element vereist een beetje manipulatie van de eigenschap className .

var toRemove = "bar",
  el = document.getElementById("link1");
el.className = el.className.replace(new RegExp("\\b" + toRemove + "\\b", "g"), "").trim();

Het verwijderen van meerdere klassennamen zou een lus vereisen. De overige voorbeelden zullen een functie gebruiken om het werk te isoleren

function removeClass(el, name) {
  name = name.split(/\s+/);
  var index = name.length,
    classes = el.className;
  while (index--) {
    classes = classes.replace(new RegExp("\\b" + name[index] + "\\b", "g"), "").trim();
  }
  el.className = classes;
}
var el = document.getElementById("link1");
removeClass(el, "bar baz");

Voor meerdere elementen met meerdere te verwijderen klassennamen zijn twee lussen nodig

function removeClass(els, name) {
  name = name.split(/\s+/);
  var regex, len,
    index = name.length;
  while (index--) {
    regex = new RegExp("\\b" + name[index] + "\\b", "g");
    len = els.length;
    while (len--) {
      els[len].className = els[len].className.replace(regex, "").trim();
    }
  }
}
var els = document.getElementsByTagName("a");
removeClass(els, "bar baz");

Een enkele klassenaam kan als een string worden verwijderd. Gebruik de spread-operator van ES6 om meerdere klassennamen te verwijderen:

document.querySelector("#link1").classList.remove("foo");
document.querySelector("#link2").classList.remove(...['foo', 'bar']);

Voor meerdere elementen moet u de klassennamen in een lus verwijderen

document.querySelectorAll(".foo").forEach(el => {
  el.classList.remove(...['bar', 'baz']);
});

Testen of een element een klasse bevat, vereist een beetje manipulatie van de eigenschap className . In dit voorbeeld wordt een matrixmethode gebruikt om de klasse te testen.

function hasClass(el, name) {
  var classes = (el && el.className || "").split(/\s+/);
  return classes.indexOf(name) > -1;
}
var el = document.getElementById("link1");
console.log(hasClass(el, "foo"));

Testen op meerdere klassennamen zou een lus vereisen.

function hasClass(el, name) {
  name = name.split(/[\s.]+/);
  var hasClass = true,
    classes = (el && el.className || "").split(/\s+/),
    index = name.length;
  while (index--) {
    hasClass = hasClass && classes.indexOf(name[index]) > -1;
  }
  return hasClass;
}
var el = document.getElementById("link1");
console.log(hasClass(el, "foo"));

In plaats van .indexOf() , kunt u ook overwegen een reguliere expressie te gebruiken.

function hasClass(el, name) {
  return new RegExp("\\b" + name+ "\\b").test(el.className);
}
var el = document.getElementById("link1");
console.log(hasClass(el, "foo"));

Het testen voor een enkele klassenaam gebeurt als volgt:

var hasClass = document.querySelector("#link1").classList.contains("foo");

Voor namen van meerdere klassen is het eenvoudiger om matches te gebruiken. Let op het gebruik van de klassenkiezer; De selector kan elke geldige string-selector zijn (id, attribuut, pseudo-klassen, enz.).

var hasClass = document.querySelector("#link1").matches('.foo.bar');
var hasClass = document.querySelector("#link2").matches('a.bar[href]');