คุณสมบัติ classList

คุณสมบัติ classList ประกอบด้วย อาเรย์เทียม ของคลาส CSS ขององค์ประกอบ และยังช่วยให้เพิ่ม และลบคลาสขององค์ประกอบ, ตรวจสอบการมีอยู่ ของคลาสเฉพาะในคลาสขององค์ประกอบ

นี่พูดถึงแอตทริบิวต์ class, ภายในซึ่งสามารถเขียนคลาสได้หลายคลาส คั่นด้วยช่องว่าง เช่น www ggg zzz การใช้ classList สามารถลบ ตัวอย่างเช่น คลาส ggg ได้ โดยไม่กระทบ คลาสอื่น ๆ

ไวยากรณ์

javascriptองค์ประกอบ.classList;

ตัวอย่าง . จำนวนคลาส

มาเรียนรู้จำนวนคลาสขององค์ประกอบ:

html<p id="elem" class="www ggg zzz"></p>
javascriptlet elem = document.querySelector('#elem');

let length = elem.classList.length;
console.log(length);

ผลลัพธ์จากการรันโค้ด:

javascript3

ตัวอย่าง . วนลูปผ่านคลาส

มาแสดงคลาสขององค์ประกอบทีละคลาส:

html<p id="elem" class="www ggg zzz"></p>
javascriptlet elem = document.querySelector('#elem');
let classNames = elem.classList;

for (let className of classNames) {
  console.log(className);
}

ผลลัพธ์จากการรันโค้ด:

javascript'www'
'ggg'
'zzz'

ดูเพิ่มเติม

  • เมธอด classList.add,
    ซึ่งเพิ่มคลาสที่กำหนด
  • เมธอด classList.remove,
    ซึ่งลบค่าที่กำหนด
  • เมธอด classList.contains,
    ซึ่งตรวจสอบคลาสที่กำหนด
  • เมธอด classList.toggle,
    ซึ่งสลับคลาสที่กำหนด