คุณสมบัติ classList ของ HTML DOM ใช้สำหรับดึงรายชื่อคลาส (class names) ที่เชื่อมโยงกับองค์ประกอบ HTML คืนค่าเป็น DOMTokenList ซึ่งเป็นชุดของโทเค็นคั่นด้วยช่องว่าง คุณสมบัตินี้มีประโยชน์สำหรับเพิ่ม ลบ หรือสลับ (toggle) คลาส CSS ขององค์ประกอบ
คุณสมบัติ classList เป็นแบบอ่านอย่างเดียว (read-only) แต่สามารถเพิ่มหรือลบคลาสได้ผ่านเมธอด add() และ remove()
คุณสมบัติ (Properties)
| คุณสมบัติ | คำอธิบาย |
|---|---|
| length | คืนจำนวนคลาสในรายการ (อ่านอย่างเดียว) |
เมธอด (Methods)
| เมธอด | คำอธิบาย |
|---|---|
| add(class1, class2, class3...) | เพิ่มคลาสหนึ่งหรือหลายคลาสให้องค์ประกอบ หากคลาสมีอยู่แล้วจะไม่เพิ่มซ้ำ |
| contains(class) | คืนค่า boolean แสดงว่าองค์ประกอบมีคลาสที่ระบุหรือไม่ (true = มี, false = ไม่มี) |
| item(index) | คืนชื่อคลาสตามลำดับ index (เริ่มจาก 0) คืน null หาก index เกินขอบเขต |
| remove(class1, class2, class3...) | ลบคลาสหนึ่งหรือหลายคลาสจากองค์ประกอบ หากคลาสไม่มีอยู่ จะไม่เกิดข้อผิดพลาด |
| toggle(class, true|false) | สลับคลาส: เพิ่มหากไม่มี (คืน true), ลบหากมี (คืน false) พารามิเตอร์ที่ 2 บังคับเพิ่ม/ลบ (true=เพิ่ม, false=ลบ) ไม่สนใจสถานะเดิม |
ไวยากรณ์ (Syntax)
element.classList
ตัวอย่างการใช้งาน
ตัวอย่างด้านล่างแสดงการเพิ่มคลาส CSS 3 คลาสให้กับ div element:
<!DOCTYPE html>
<html>
<head>
<style>
.firstDiv {
width: 200px;
height: 200px;
padding: 15px;
border: 1px double blue;
position:relative;
top:10px;
}
.secondDiv {
background-color: lightgreen;
color: red;
}
.thirdDiv {
text-transform: capitalize;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<p>Click the below button to add class to the below div element</p>
<button onclick="classAdd()">ADD CLASS</button>
<br>
<div id="DIV1"> sample div </div>
<script>
function classAdd() {
document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv");
}
</script>
</body>
</html>
ผลลัพธ์ (Output)
ก่อนคลิกปุ่ม: div แสดงปกติ (ไม่มีสไตล์พิเศษ) หลังคลิกปุ่ม ADD CLASS: div จะได้รับสไตล์จาก 3 คลาส - กว้าง 200px สูง 200px ขอบสีน้ำเงิน พื้นสีเขียวอ่อน ตัวอักษรสีแดง ตัวแรกของคำใหญ่ จัดกลาง ขนาด 30px
คำอธิบายโค้ด:
- สร้าง div element ID="DIV1" และ 3 คลาส CSS (.firstDiv, .secondDiv, .thirdDiv)
- สร้างปุ่ม ADD CLASS เรียกฟังก์ชัน classAdd() เมื่อคลิก
- ฟังก์ชัน classAdd() ใช้ getElementById หา DIV1 แล้ว ใช้ classList.add() เพิ่ม 3 คลาสพร้อมกัน
ข้อดีของ classList: จัดการหลายคลาสได้ง่ายกว่า className (string) ที่ต้องจัดการสตริงเอง รองรับ add, remove, toggle, contains ได้โดยตรง
