คุณสมบัติรายการคลาส HTML DOM

คุณสมบัติ HTML DOM classList ใช้เพื่อส่งคืนชื่อคลาสที่เกี่ยวข้องกับองค์ประกอบ HTML ส่งคืนชื่อคลาสในรูปแบบของ DOMTokenlist DOMTokenlist เป็นเพียงชุดของโทเค็นที่คั่นด้วยช่องว่าง คุณสมบัตินี้มีประโยชน์ในการเพิ่ม ลบ หรือสลับคลาส css ขององค์ประกอบ

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

คุณสมบัติ

ต่อไปนี้เป็นคุณสมบัติของ classList -

ทรัพย์สิน	คำอธิบาย
ความยาว	การคืนค่าจำนวนคลาสในรายการ เป็นแบบอ่านอย่างเดียว

วิธีการ

ต่อไปนี้เป็นวิธีการของ classList -

วิธีการ	คำอธิบาย
add(class1, class2, class 3...)	หากต้องการเพิ่มชื่อคลาสอย่างน้อยหนึ่งชื่อให้กับองค์ประกอบ หากคลาสที่ระบุมีอยู่แล้วจะไม่ถูกเพิ่ม
ประกอบด้วย(คลาส)	การคืนค่าบูลีนที่แสดงว่าองค์ประกอบมีชื่อคลาสที่กำหนดหรือไม่ True หมายถึงองค์ประกอบมีชื่อคลาสที่ระบุ ในขณะที่ false หมายถึงไม่มีชื่อคลาสในองค์ประกอบ
รายการ(ดัชนี)	การส่งคืนชื่อคลาสด้วยหมายเลขดัชนีที่กำหนดจากองค์ประกอบ การสร้างดัชนีเริ่มต้นที่ 0 และจะคืนค่า null หากดัชนีอยู่นอกช่วง
remove(class1, class2 class 3, ...)	หากต้องการลบชื่อคลาสตั้งแต่หนึ่งชื่อขึ้นไปจากองค์ประกอบ หากไม่มีคลาสที่ระบุใน Remove จะไม่มีข้อผิดพลาด
toggle(คลาส จริง\|เท็จ)	หากต้องการสลับระหว่างชื่อคลาสสำหรับองค์ประกอบ พารามิเตอร์แรกเพิ่มคลาสให้กับองค์ประกอบที่ไม่มีอยู่และคืนค่าจริงในขณะที่หากมีคลาสอยู่ก็เพียงแค่ลบออกจากองค์ประกอบและส่งกลับค่าเท็จ พารามิเตอร์ที่สองเป็นตัวเลือกที่ใช้ค่าบูลีนและบังคับให้คลาสที่กำหนด ที่จะเพิ่มหรือลบออก ไม่สนใจว่าจะมีมาก่อนหรือไม่

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติ classList -

element.classList

ตัวอย่าง

ให้เราดูตัวอย่างคุณสมบัติ HTML DOM classList -

<!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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

คุณสมบัติรายการคลาส HTML DOM

เมื่อคลิกปุ่ม ADD CLASS -

คุณสมบัติรายการคลาส HTML DOM

ในตัวอย่างข้างต้น −

เราได้สร้างองค์ประกอบ div และคลาสสไตล์ css สามคลาสซึ่งเราจะเพิ่มใน div ในภายหลัง -

.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;
}
<div id="DIV1">
sample div
</div>

จากนั้นเราได้สร้างปุ่ม ADD CLASS ซึ่งจะรันเมธอด classAdd() เมื่อคลิก -

<button onclick="classAdd()">ADD CLASS</button>

classAdd() วิธีการรับองค์ประกอบที่มี “DIV1” id ที่เชื่อมโยงกับมันซึ่งในกรณีของเราคือ

องค์ประกอบ จากนั้นใช้คุณสมบัติรายการคลาสและวิธี add() เราเพิ่มคลาส firstDiv, secondDiv และ thirdDiv ให้กับองค์ประกอบ

function classAdd() {
   document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv");
}