CSS aanpassen

Naast het bewerken van de HTML, kunnen we met JavaScript ook CSS manipuleren.

Directe CSS-aanpassing via JavaScript

Het is mogelijk om de CSS van een element direct aan te passen door de style property van dat element te wijzigen. Bijvoorbeeld:

document.querySelector('#p2').style.color = 'blue';

FlemsFlems.io

Let op: Het aanpassen van CSS via JavaScript op deze manier wordt vaak vermeden, omdat het kan leiden tot complexiteit en onvoorspelbare gevolgen. Het overschrijft inline stijlen en kan de scheiding van verantwoordelijkheden tussen HTML, CSS en JavaScript verstoren.

Classlist

Een betere en meer gestructureerde manier om CSS toe te passen via JavaScript is door gebruik te maken van de classList van een element. Hiermee kun je classes toevoegen of verwijderen, zonder direct inline stijlen te bewerken. Het voordeel hiervan is dat je de styling beheert via de CSS-bestanden en niet direct in de JavaScript-code.

Classlist ophalen

let classesOnSection = document.querySelector("section").classList // toont een lijst van alle classes op de section

Een class toevoegen

Om een class aan een element toe te voegen, gebruik je de add() methode:

document.querySelector("section").classList.add("my-class") // voeg de class my-class toe aan de lijst van classes.

Een class verwijderen

Om een class van een element te verwijderen, gebruik je de remove() methode:

document.querySelector("section").classList.remove("my-class") // verwijder de class my-class van de classlist. 

CSS uitlezen met JavaScript

CSS die al door de browser verwerkt werd (vanuit een externe stylesheet), kan je niet zomaar uitlezen. Hiervoor gebruiken we de functie window.getComputedStyle().

let color = window.getComputedStyle(
  document.querySelector('#id")
).backgroundColor;