การนำสไตล์ไปใช้ใน JavaScript
มาสร้างปุ่มกันเถอะ เมื่อคลิกที่ปุ่ม
องค์ประกอบจะแสดงหรือซ่อน
ให้องค์ประกอบซ่อนไว้โดยค่าเริ่มต้น (เราจะทำสิ่งนี้
โดยใช้ display:
none) และจะแสดงด้วยการเพิ่ม
คลาส active เราจะ
เพิ่มหรือลบคลาสนี้ด้วย 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');
});
: