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:
<button id="button">click me</button>
<div id="elem"></div>
#elem {
display: none;
width: 200px;
height: 200px;
border: 1px solid green;
}
#elem.active {
display: block;
}
let button = document.querySelector('#button');
let elem = document.querySelector('#elem');
button.addEventListener('click', function() {
elem.classList.toggle('active');
});
: