Εφαρμογή Στυλ στο JavaScript

Ας φτιάξουμε ένα κουμπί που όταν πατιέται το στοιχείο θα εμφανίζεται και θα κρύβεται εναλλάξ. Ας υποθέσουμε ότι από προεπιλογή το στοιχείο είναι κρυμμένο (αυτό θα το υλοποιήσουμε με το display: none), και θα εμφανίζεται με την προσθήκη μιας κλάσης active. Αυτήν την κλάση θα την προσθέτουμε και αφαιρούμε εναλλάξ χρησιμοποιώντας το 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');
});

Результат: