คุณสมบัติ classList ของ HTML DOM Element

คำอธิบายและวิธีใช้

classList คุณสมบัติกลับค่าคือชื่อคลาสขององค์ประกอบ

classList คุณสมบัติกลับค่าคือ DOMTokenList

ตัวอย่าง

ตัวอย่าง 1

เพิ่มคลาส "myStyle" ใส่องค์ประกอบ

const list = element.classList;
list.add("myStyle");

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ลบคลาส "myStyle" ออกจากองค์ประกอบ

const list = element.classList;
list.remove("myStyle");

ทดลองด้วยตัวเอง

ตัวอย่าง 3

เปิด/ปิด "myStyle":

const list = element.classList;
list.toggle("myStyle");

ทดลองด้วยตัวเอง

คำแนะนำ:ความคาดหวัง: มีตัวอย่างเพิ่มเติมใต้หน้านี้

รูปแบบการใช้งาน

element.classList

ค่าที่กลับมา

ประเภท คำอธิบาย
สมบัติ DOMTokenList คือรายการชื่อคลาสขององค์ประกอบ DOM

คำเตือน:คำเตือน: คุณสมบัติ classList คือคุณสมบัติที่เป็นการอ่านแค่เดียว แต่คุณสามารถใช้วิธีด้านล่างเพื่อเพิ่ม, แปลงหรือลบคลาส CSS ในรายการ

classList และวิธีใช้

ชื่อ คำอธิบาย
add() เพิ่มโทร์นเนลหนึ่งหรือหลายตัวเข้าไปในรายการ
contains() เช็คว่ารายการมีชนิดหรือไม่
entries() จากการเลือกค่าในตารางให้เกิดเหตุเมื่อมีค่าในตาราง
forEach() ทำงานคลิกแบ็คเพื่อตัวอักษรที่มีในรายการ
item() คืนมาตัวอักษรที่มีที่ดัชนีที่กำหนด
keys() คืนมาโดยเป็นอินเทอร์เนเตอร์ที่มีชื่อในรายการ
length คืนมาจำนวนตัวอักษรในรายการ
remove() ลบตัวอักษรหนึ่งหรือหลายตัวอักษรออกจากรายการ
replace() แทนที่ตัวอักษรในรายการ
supports() คืนมาที่แปลงเป็นค่าที่เป็นความหมายที่รองรับโดยอุปกรณ์
toggle() เปลี่ยนระหว่างตัวอักษรที่มีในรายการ
value คืนมาโดยเป็นตัวแปลความหมายที่มีตัวอักษร
values() คืนมาโดยเป็นอินเทอร์เนเตอร์เนอร์ที่มีค่าในรายการ

ตัวอย่างเพิ่มเติม

ตัวอย่าง 4

เพิ่มชั้นหลายชื่อไปที่องค์ประกอบ

element.classList.add("myStyle", "anotherClass", "thirdClass");

ทดลองด้วยตัวเอง

ตัวอย่าง 5

ลบชั้นหลายชื่อออกจากองค์ประกอบ

element.classList.remove("myStyle", "anotherClass", "thirdClass");

ทดลองด้วยตัวเอง

ตัวอย่าง 6

จำนวนชื่อชั้นขององค์ประกอบ

let numb = element.classList.length;

ทดลองด้วยตัวเอง

ตัวอย่าง 7

เรียกชื่อชั้นขององค์ประกอบ "myDIV"

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

ทดลองด้วยตัวเอง

ตัวอย่าง 8

เรียกชื่อชั้นแรกขององค์ประกอบ

let className = element.classList.item(0);

ทดลองด้วยตัวเอง

ตัวอย่าง 9

องค์ประกอบมีชั้น "myStyle" หรือไม่?

let x = element.classList.contains("myStyle");

ทดลองด้วยตัวเอง

ตัวอย่าง 10

ถ้าองค์ประกอบมีชั้น "myStyle" ก็ลบ "anotherClass" ออก

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

ทดลองด้วยตัวเอง

ตัวอย่าง 11

เปลี่ยนระหว่างรูปแบบที่มีชั้นเพื่อสร้างปุ่มดาวน์

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

ทดลองด้วยตัวเอง

ตัวอย่าง 12

สร้างแถวแนวทางที่เหมือนดังนี้:

// ได้รับแถวแนวทาง
const navbar = document.getElementById("navbar");
// ได้รับตำแหน่งการเลื่อนของแถวแนวทาง
const sticky = navbar.offsetTop;
// ขณะที่คุณไปถึงตำแหน่งการเลื่อน ให้ sticky หลักคลาสเพิ่มไปที่แถวแนวทาง
// ลบความเรียกในตำแหน่งการเลื่อนที่ออกมา
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

ทดลองด้วยตัวเอง

การสนับสนุนเบราเซอร์

ทุกเบราเซอร์ทุกครั้งเข้าถึง element.classList:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน 9-11 สนับสนุน สนับสนุน สนับสนุน สนับสนุน

หน้าที่เกี่ยวข้อง

ตัวอย่าง CSS:CSS ฝายนม

คู่มือ CSS:CSS .class ฝายนม

องค์ประกอบ DOMTokenList

className ฝายนม

getElementsByClassName() ฝายนม

HTML DOM Style ตัวแปร