Toepassen van stijlen in JavaScript

Laten we een knop maken waarop, wanneer erop wordt geklikt, een element wordt getoond of verborgen. Stel dat het element standaard verborgen is (dit implementeren we met display: none), en het wordt getoond door het toevoegen van de klasse active. Deze klasse zullen we toevoegen en verwijderen met classList.toggle:

html<button id="button">click me</button>
<div id="elem"></div>

css#elem {
  display: none;
  width: 200px;
  height: 200px;
  border: 1px solid green;
}
#elem.active {
  display: block;
}

javascriptlet button = document.querySelector('#button');
let elem = document.querySelector('#elem');

button.addEventListener('click', function() {
  elem.classList.toggle('active');
});

Результат: