คุณสมบัติ classList ใน HTML DOM

คุณสมบัติ classList (classList Property)

คุณสมบัติ classList ใน HTML DOM ใช้สำหรับคืนชื่อคลาส (class names) ที่เกี่ยวข้องกับอิลิเมนต์ HTML คืนค่าในรูปแบบ DOMTokenList ซึ่งเป็นชุดของ tokens แยกด้วยช่องว่าง (space-separated) คุณสมบัตินี้มีประโยชน์สำหรับเพิ่ม, ลบ, หรือ toggle CSS classes ของอิลิเมนต์

คุณสมบัติ classList เป็นคุณสมบัติแบบอ่านอย่างเดียว (read-only) แต่คุณสามารถเพิ่มหรือลบคลาสของอิลิเมนต์ได้โดยใช้เมธอด add() และ remove()

คุณสมบัติ (Properties)

คุณสมบัติ	คำอธิบาย
`length`	คืนจำนวนคลาสในรายการ (read-only)

เมธอด (Methods)

เมธอด	คำอธิบาย
`add(class1, class2, ...)`	เพิ่มชื่อคลาสหนึ่งหรือหลายชื่อ ถ้าคลาสมีอยู่แล้วจะไม่เพิ่มซ้ำ
`contains(class)`	คืนค่า Boolean ว่าอิลิเมนต์มีคลาสที่ระบุหรือไม่ (true/false)
`item(index)`	คืนชื่อคลาสที่ index ที่ระบุ (เริ่ม 0) คืน null ถ้า index เกิน
`remove(class1, class2, ...)`	ลบชื่อคลาสหนึ่งหรือหลายชื่อ ถ้าคลาสไม่มีอยู่ก็ไม่ error
`toggle(class, force)`	สลับคลาส: เพิ่มถ้าไม่มี (คืน true), ลบถ้ามี (คืน false). พารามิเตอร์ force (optional) บังคับเพิ่ม (true) หรือลบ (false)
`replace(oldClass, newClass)`	แทนที่คลาสเก่าด้วยคลาสใหม่ (เพิ่มใน DOMTokenList spec ใหม่)

ไวยากรณ์ (Syntax)

element.classList

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการเพิ่ม CSS classes 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>

ผลลัพธ์

เริ่มต้น: div ธรรมดา ข้อความ "sample div"

คลิก ADD CLASS: div ได้ class ทั้ง 3 คลาส - กว้าง 200px, สูง 200px, พื้นหลังเขียวอ่อน, ตัวอักษรแดง, ตัวใหญ่, จัดกลาง, ตัวแรกพิมพ์ใหญ่

คำอธิบายเพิ่มเติม

classList ทดแทน className (string) ที่ต้องจัดการ string เอง
classList.add() รับหลาย arguments ได้: add('a', 'b', 'c')
classList.toggle('class', true) บังคับเพิ่ม, toggle('class', false) บังคับลบ
classList.replace('old', 'new') แทนที่คลาส (รองรับใน browser ใหม่ๆ)
รองรับใน IE10+ (partial), ทุก browser สมัยใหม่
ใช้แทน jQuery .addClass(), .removeClass(), .toggleClass(), .hasClass()