วิธี add ของออบเจ็กต์ classList
วิธี add ของออบเจ็กต์
classList
ช่วยให้สามารถเพิ่มคลาส CSS ให้กับองค์ประกอบได้
ไวยากรณ์
element.classList.add(class);
ตัวอย่าง
มาเพิ่มคลาส kkk ให้กับองค์ประกอบ:
<p id="elem" class="www ggg zzz"></p>
let elem = document.querySelector('#elem');
elem.classList.add('kkk');
ผลลัพธ์จากการรันโค้ด:
<p id="elem" class="www ggg zzz kkk"></p>
ตัวอย่าง
ลองเพิ่มคลาส zzz ให้กับองค์ประกอบ ซึ่งเป็นคลาสที่มีอยู่แล้วในองค์ประกอบ - จะไม่เกิดอะไรขึ้น เนื่องจากไม่มีการเพิ่มคลาสที่ซ้ำกัน:
<p id="elem" class="www ggg zzz"></p>
let elem = document.querySelector('#elem');
elem.classList.add('zzz');
ผลลัพธ์จากการรันโค้ด:
<p id="elem" class="www ggg zzz"></p>
ดูเพิ่มเติม
-
วิธี
classList.remove,
ซึ่งลบคลาสที่กำหนดออก -
วิธี
classList.contains,
ซึ่งตรวจสอบคลาสที่กำหนด -
วิธี
classList.toggle,
ซึ่งสลับสถานะของคลาสที่กำหนด
