ตัวอย่าง
เพิ่ม "mystyle" ชั้นกับ <div> องค์ประกอบ:
document.getElementById("myDIV").classList.add("mystyle"); ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
สถานที่ให้บริการ classList ผลตอบแทนชั้น name(s) ขององค์ประกอบที่เป็นวัตถุ DOMTokenList
สถานที่แห่งนี้จะเป็นประโยชน์ในการเพิ่มลบและสลับคลาส CSS ในองค์ประกอบ
สถานที่ให้บริการ classList อ่านอย่างเดียว แต่คุณสามารถแก้ไขได้โดยการใช้ add() และ remove() วิธีการ
วิธีการแก้ปัญหาข้ามเบราว์เซอร์: คุณสมบัติ classList ไม่สนับสนุนใน IE9 และก่อนหน้านี้ อย่างไรก็ตามคุณสามารถใช้ className ทรัพย์สินหรือการแสดงออกปกติสำหรับการแก้ปัญหาเบราว์เซอร์ (ดู "More Examples" ที่ด้านล่างของหน้านี้)
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| classList | 8.0 | 10.0 | 3.6 | 5.1 | 11.5 |
วากยสัมพันธ์
element .classListคุณสมบัติ
| คุณสมบัติ | ลักษณะ |
|---|---|
| length | ส่งกลับจำนวนของ ชั้นเรียนในรายการ สถานที่แห่งนี้เป็นอ่านอย่างเดียว |
วิธีการ
| วิธี | ลักษณะ |
|---|---|
| add( class1, class2, ... ) | เพิ่มหนึ่งหรือระดับอื่น ๆ ชื่อองค์ประกอบ ถ้าชั้นที่ระบุอยู่แล้วชั้นจะไม่ถูกเพิ่ม |
| contains( class ) | ส่งกลับค่าบูลีนระบุว่าเป็นองค์ประกอบที่มีชื่อชั้นที่ระบุ ค่าที่เป็นไปได้:
|
| item( index ) | ผลตอบแทนที่ได้ชื่อชั้นที่มีจำนวนดัชนีที่ระบุจากองค์ประกอบ ดัชนีเริ่มต้นที่ 0 ส่งกลับ null ถ้าดัชนีอยู่นอกช่วง |
| remove( class1, class2, ... ) | ลบหนึ่งหรือระดับมากขึ้นชื่อจากองค์ประกอบ หมายเหตุ: การถอดชั้นเรียนที่ไม่มีอยู่ไม่ได้โยนความผิดพลาด |
| toggle( class, true|false) | สลับระหว่างชื่อชั้นสำหรับองค์ประกอบ พารามิเตอร์แรกเอาชั้นที่ระบุจากองค์ประกอบและผลตอบแทนที่เป็นเท็จ ถ้าชั้นไม่อยู่ก็จะถูกเพิ่มองค์ประกอบและค่าตอบแทนเป็นความจริง พารามิเตอร์ที่สองตัวเลือกคือค่าบูลีนที่บังคับให้ชั้นเรียนเพื่อเพิ่มหรือลบออกโดยไม่คำนึงถึงหรือไม่ก็มีอยู่แล้ว ตัวอย่างเช่น: นำชั้นเรียน: องค์ประกอบ .classList toggle("classToRemove", false) ; เพิ่มชั้นเรียน: องค์ประกอบ .classList toggle("classToAdd", true) ; หมายเหตุ: พารามิเตอร์ที่สองไม่ได้รับการสนับสนุนใน Internet Explorer หรือ Opera 12 และก่อนหน้านี้ |
รายละเอียดทางเทคนิค
| กลับค่า: | DOMTokenList ที่มีรายชื่อของชั้นเรียน name(s) ขององค์ประกอบ |
|---|
ตัวอย่างอื่น ๆ
ตัวอย่าง
เพิ่มหลายชั้นเรียนกับ <div> องค์ประกอบ:
document.getElementById("myDIV").classList.add("mystyle",
"anotherClass", "thirdClass"); ลองตัวเอง» ตัวอย่าง
นำระดับจาก <div> องค์ประกอบ:
document.getElementById("myDIV").classList.remove("mystyle"); ลองตัวเอง» ตัวอย่าง
ลบหลายชั้นเรียนจาก <div> องค์ประกอบ:
document.getElementById("myDIV").classList.remove("mystyle",
"anotherClass", "thirdClass"); ลองตัวเอง» ตัวอย่าง
สลับไปมาระหว่างสองชั้นสำหรับ <div> องค์ประกอบ:
document.getElementById("myDIV").classList.toggle("newClassName"); ลองตัวเอง» ตัวอย่าง
รับชั้น name(s) ของ <div> องค์ประกอบ:
<div id="myDIV" class="mystyle
anotherClass thirdClass">I am a DIV element</div>
var x = document.getElementById("myDIV").classList;ผลของ x จะเป็น:
mystyle
anotherClass thirdClass ลองตัวเอง» ตัวอย่าง
หาวิธีหลายชื่อชั้นเรียน <div> องค์ประกอบมี:
var x = document.getElementById("myDIV").classList.length;ผลของ x จะเป็น:
3 ลองตัวเอง» ตัวอย่าง
ได้รับชื่อชั้นแรก (index 0) ของ <div> องค์ประกอบ:
var x = document.getElementById("myDIV").classList.item(0);ผลของ x จะเป็น:
mystyle ลองตัวเอง» ตัวอย่าง
หาคำตอบว่าเป็นองค์ประกอบที่มี "mystyle" ระดับ:
var x = document.getElementById("myDIV").classList.contains("mystyle");ผลของ x จะเป็น:
true ลองตัวเอง» ตัวอย่าง
หาคำตอบว่าเป็นองค์ประกอบที่มี "mystyle" ระดับ ถ้าเป็นเช่นนั้นเอาชื่อชั้นอื่น:
var x = document.getElementById("myDIV");
if
(x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
} ลองตัวเอง» ตัวอย่าง
สลับไปมาระหว่างชั้นเรียนเพื่อสร้างปุ่มแบบเลื่อนลง:
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction toggles between adding and removing the show class, which
is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick =
function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show'))
{
openDropdown.classList.remove('show');
}
}
}
}
ลองตัวเอง» ตัวอย่างสำรอง: เพิ่ม
วิธีการแก้ปัญหาเบราว์เซอร์เมื่อใช้ classList add() วิธีการสำหรับ IE9 และก่อนหน้านี้:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.add("mystyle");
} else {
x.className
= "mystyle"; // For IE9 and earlier
} ลองตัวเอง» ตัวอย่างสำรอง: ลบ
วิธีการแก้ปัญหาเบราว์เซอร์เมื่อใช้ classList remove() วิธีการสำหรับ IE9 และก่อนหน้านี้:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.remove("mystyle");
} else {
x.className = x.className.replace(/\bmystyle/g, ""); // For IE9
and earlier
} ลองตัวเอง» สำรองตัวอย่าง: มี
วิธีการแก้ปัญหาเบราว์เซอร์เมื่อใช้ classList contains() วิธีการสำหรับ IE9 และก่อนหน้านี้:
var x = document.getElementById("myDIV");
if (x.classList)
{
alert(x.classList.contains("mystyle"));
} else {
alert(/\bmystyle/g.test(x.className)); // For IE9 and earlier
} ลองตัวเอง» สำรองตัวอย่าง: สลับ
วิธีการแก้ปัญหาเบราว์เซอร์เมื่อใช้ classList toggle() วิธีการสำหรับ IE9:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.toggle("mystyle");
} else {
// For IE9
var classes = x.className.split(" ");
var i =
classes.indexOf("mystyle");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("mystyle");
x.className = classes.join(" ");
} ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
สอน CSS: CSS Selectors
CSS อ้างอิง: CSS .class เลือก
HTML DOM อ้างอิง: HTML DOM className Property
HTML DOM อ้างอิง: HTML DOM getElementsByClassName() วิธี
HTML DOM อ้างอิง: HTML DOM สไตล์วัตถุ
<ธาตุวัตถุ