HTML DOM Element classList
❮ วัตถุธาตุตัวอย่าง
เพิ่มคลาส "myStyle" ให้กับองค์ประกอบ:
element.classList.add("myStyle");
ลบคลาส "myStyle" ออกจากองค์ประกอบ:
element.classList.remove("myStyle");
สลับระหว่างสองคลาสสำหรับองค์ประกอบ:
element.classList.toggle("newStyle");
ตัวอย่างเพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติclassListส่งคืนชื่อคลาส CSS ขององค์ประกอบ
คุณสมบัติclassListส่งคืนอ็อบเจ็กต์ DOMTokenList
คุณสมบัติclassListเป็นแบบอ่านอย่างเดียว แต่คุณสามารถใช้เมธอด add() และ remove() เพื่อเพิ่มหรือลบคลาส CSS
บันทึก
คุณสมบัติclassListนี้มีประโยชน์ทั้งในการเพิ่ม ลบ และสลับคลาส CSS บนองค์ประกอบ
ดูสิ่งนี้ด้วย:
องค์ประกอบ className คุณสมบัติ
ไวยากรณ์
element.classList
มูลค่าทรัพย์สิน
| Value | Description |
| length | The number of classes in the list. This property is read-only. |
วิธีการ
| Method | Description |
| add(class1, class2, ...) |
Adds one or more classes. |
| contains(class) |
Returns true if an element has the class, otherwise false.
|
| item(index) | Returns the class name with a specified index. Index starts at 0. Returns null if the index is out of range. |
| remove(class1, class2, ...) | Removes one or more classes from an element. Removing a class that does not exist, does NOT throw an error. |
| toggle(class, true|false) | Toggles between a class for an element. It removes the class and returns false.If the class does not exist, it adds the class and returns true.The optional second parameter is a boolean that forces the class to be added or removed, regardless of whether or not it already exists. The second parameter is not supported in Internet Explorer 11 or earlier. |
คืนมูลค่า
| Type | Description |
| Object | A DOMTokenList. A list of the class names of an element. |
ตัวอย่างเพิ่มเติม
เพิ่มหลายคลาสให้กับองค์ประกอบ:
element.classList.add("myStyle", "anotherClass", "thirdClass");
ลบหลายคลาสออกจากองค์ประกอบ:
element.classList.remove("myStyle", "anotherClass", "thirdClass");
องค์ประกอบมีชื่อคลาสกี่ชื่อ:
let numb = element.classList.length;
รับชื่อคลาสขององค์ประกอบ "myDIV":
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;
รับชั้นหนึ่งขององค์ประกอบ:
let className = element.classList.item(0);
องค์ประกอบมีคลาส "myStyle" หรือไม่
let x = element.classList.contains("myStyle");
ลบ "anotherClass" หากองค์ประกอบมีคลาส "myStyle"
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
สลับระหว่างชั้นเรียนเพื่อสร้างปุ่มดรอปดาวน์:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
สร้างแถบการนำทางที่ติดหนึบ:
// Get the navbar
var navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
รองรับเบราว์เซอร์
element.classList รองรับในทุกเบราว์เซอร์:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 10-11 | Yes | Yes | Yes | Yes |
❮ วัตถุธาตุ