การนำสไตล์ไปใช้ใน 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');
});

Результат: