CSS-klassen aanpassen in JavaScript met het object classList

Dit artikel laat zien hoe je CSS-klassen aanpast met het JavaScript-object classList in je DOM-project. Met het object classList regel je welke CSS-klassen aan een HTML-element hangen.

html

<!DOCTYPE html>
<html>
<head>
  <title>Mon titre</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
	  .colorText {
        color: purple;
      }

.boldText {
        font-weight: bold;
      }

.bigText {
        font-size: 35px;
      }
	</style>
</head>
<body>
    <p id="myText">
      Hello World!
    </p>
</body>
</html>

Laten we je tekst nu aanpassen met de eigenschap classList en je CSS-klassen toepassen.

De methodes .add() en .contains() van classList gebruiken

Maak een bestand index.js, haal een referentie naar je paragraaf op en roep de methode classList.add() aan:

index.js

javascript

const myText = document.getElementById('myText');

myText.classList.add('colorText');

De ingebouwde methode classList.add() zet een klasse op je HTML-element. In dit geval verschijnt de tekst in je paragraaf voortaan in het paars.

Je kunt ook nagaan of de CSS-klasse op je paragraaf staat met de methode classList.contains(), die een boolean teruggeeft:

javascript

const myText = document.getElementById('myText');

console.log(myText.classList.contains('colorText')); // true

Omdat de CSS-klasse colorText op je paragraaf staat, geeft die aanroep true terug.

De methodes .item() en .remove() van classList gebruiken

Voeg in je bestand index.js nog een paar CSS-klassen aan je paragraaf toe:

index.js

javascript

const myText = document.getElementById('myText');

myText.classList.add('boldText');
myText.classList.add('bigText');
console.log(myText.classList); // ['colorText', 'boldText', 'bigText'];

De eigenschap classList bewaart elke extra klasse in een array. Log je myText.classList in de console, dan krijg je een array met je CSS-klassen.

Wil je weten op welke index elke CSS-klasse in de array staat, roep dan de methode classList.item() aan:

javascript

const myText = document.getElementById('myText');

myText.classList.item('boldText'); // 2

Een CSS-klasse verwijder je met de methode classList.remove():

javascript

const myText = document.getElementById('myText') ;

myText.classList.remove('bigText') ;
console.log(myText.classList) ; // ['colorText', 'boldText'];

Log je daarna myText.classList in de console, dan staat de verwijderde CSS-klasse niet meer in de array en werkt ze ook niet meer op je paragraaf.

Nu je klassen kunt toevoegen, controleren en verwijderen, kijken we naar wat classList verder nog te bieden heeft.

Werken met de methode .toggle() van classList

In plaats van classList.add() en classList.remove() naast elkaar aan te roepen, kun je de methode classList.toggle() gebruiken:

Hang daarvoor in je bestand index.js een event listener aan een knop:

index.js

javascript

textButton.addEventListener('click', () => {
  myText.classList.toggle('newFont');
});

Bij elke klik voegt classList.toggle() de CSS-klasse toe als ze niet in de array classList staat, en geeft de methode true terug. Staat de klasse er al, dan haalt de methode ze weg en geeft ze false terug.

javascript

const anotherClass = myText.classList.toggle('newSize');

console.log(anotherClass); // true --> de klasse is toegevoegd

Je kunt ook een boolean als optioneel tweede argument aan classList.toggle() meegeven. Afhankelijk van hoe dat tweede argument uitpakt, wordt de CSS-klasse toegevoegd of verwijderd:

javascript

const bool = false;

let firstToggle = myText.classList.toggle('newSize', bool);
console.log(firstToggle);
// false, 'newFont' bestaat al en wordt uit de array classList verwijderd

let secondToggle = shadesEl.classList.toggle('newColor', !bool);
console.log(secondToggle);
// true, 'newColor' bestaat niet en de klasse wordt toegevoegd.

Met de methode classList.toggle() voeg je CSS-klassen toe en verwijder je ze, of ze nu al in je array staan of niet, en dat in minder regels code.