ในอดีตเราจำเป็นต้องใช้วิธีการบางอย่างของ JS หรือ JQuery, Hasclass, AddClass และ RemoveClass ลำบาก
รายการคลาสใหม่ของ H5 ช่วยให้เราสามารถใช้ชื่อหมวดหมู่ขององค์ประกอบที่สะดวกกว่าของเรา
สังเกตความเข้ากันได้ของ Classlist ค่อนข้างแย่ไม่เข้ากันได้กับเบราว์เซอร์ IE ด้านล่าง IE10
ตัวอย่างที่เป็นแบบอย่าง
<doctype html> <html> <gead> <meta charset = utf-8> <title> classlist </title> <style> Font-Size: 25px;} </style> </head> <body> <p> คลิกปุ่มเพื่อเพิ่มคลาส Mystyle ลงในองค์ประกอบ DIV </p> <ปุ่ม onclick = myFunction ()> คลิกฉัน </pution> <div id = mydiv> ฉันเป็นองค์ประกอบ div </div> <script> function myfunction () {document.getElementById (mydiv) .classlist.add (mystyle);} </script> </body> </html> หมวดหมู่ใหม่การใช้วิธีเพิ่มคุณสามารถเพิ่มหมวดหมู่หนึ่งหรือมากกว่าลงในองค์ประกอบหน้า:
document.getElementById (mydiv) .classlist.add (Mystyle);ลบคลาส
ด้วยวิธีการลบคุณสามารถลบคลาส CSS เดียว:
document.getElementById (mydiv) .classlist.remove (Mystyle);สลับชื่อหมวดหมู่ในองค์ประกอบ
สลับชื่อหมวดหมู่ในองค์ประกอบ ใช้วิธีการสลับไวยากรณ์: สลับ (คลาส, จริง | เท็จ)
พารามิเตอร์แรกคือชื่อคลาสที่จะลบในองค์ประกอบและส่งคืนเท็จ
หากไม่มีชื่อชื่อคลาสจะถูกเพิ่มลงในองค์ประกอบและส่งคืนจริง
ที่สองคือพารามิเตอร์ทางเลือก ตัวอย่างเช่น:
ลบหนึ่ง
document.getElementById (mydiv) .classlist.toggle (Classtoremove, False);
เพิ่มหนึ่ง
document.getElementById (mydiv) .classlist.toggle (classtoadd, true);
หมายเหตุ: Internet Explorer หรือ Opera 12 และเวอร์ชันก่อนหน้านี้ไม่รองรับพารามิเตอร์ที่สอง
ตรวจสอบว่ามีคลาสที่แน่นอนหรือไม่ใช้วิธีการที่มีการพิจารณาว่าคลาสมีอยู่หรือไม่และกลับสู่ค่าบูลีนหรือไม่
// ส่งคืนเอกสารจริงหรือเท็จ getElementById (mydiv) .classlist.contains (mydiv);
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้