การเพิ่มคลาสให้กับองค์ประกอบ HTML นั้นทำได้ง่ายเมื่อใช้วิธีคุณสมบัติ classList ของ JavaScript add() . อันดับแรก เรามาดูสูตรทั่วไปอย่างรวดเร็ว และติดตามผลด้วยตัวอย่างที่นำไปใช้ได้จริง
สูตร
var element = document.querySelector("selector")
element.classList.add("class")ในตัวอย่างทั่วไปข้างต้น เราพบองค์ประกอบ HTML แรก บนหน้าที่ระบุชื่อตัวเลือก (อาจเป็นตัวเลือกองค์ประกอบ ตัวเลือกคลาส ฯลฯ) และเก็บข้อมูลอ้างอิงไว้ด้วยตัวแปร
จากนั้นเราแนบคุณสมบัติ classList add() วิธีการองค์ประกอบและระบุคลาสที่เราต้องการเพิ่ม
ตัวอย่าง classList ที่ใช้งานได้จริง
มาลองค้นหาองค์ประกอบย่อหน้าแรกในหน้านี้ที่คุณกำลังอ่านอยู่ และจัดคลาส bg-red .
var firstParagraph = document.querySelector("p")
firstParagraph.classList.add("bg-red")และผลลัพธ์:
หมายเหตุ:ฉันมีbg-red ในสไตล์ชีต CSS ของเว็บไซต์ฉันจึงใช้งานได้ ชั้นเรียนมีลักษณะดังนี้:
.bg-red {
background-color: #cf4b32;
}คุณสามารถใช้เมธอด classList add เพื่อเพิ่มคลาสที่กำหนดเองโดยใช้คุณสมบัติ CSS ใดก็ได้ ตั้งแต่สีจนถึงขนาดฟอนต์
เพิ่มหลายคลาสในองค์ประกอบเดียวกัน
คุณสามารถเพิ่มคลาสต่างๆ ให้กับองค์ประกอบเป้าหมายของคุณได้อย่างง่ายดายพร้อมๆ กัน ลองเพิ่ม 3 คลาสในองค์ประกอบย่อหน้าแรกของเรา:
var firstParagraph = document.querySelector("p")
firstParagraph.classList.add("text-center", "text-xxl", "italic")การทำเช่นนี้จะทำให้ย่อหน้าแรกในหน้านี้จัดชิดกึ่งกลางและให้ขนาดแบบอักษรใหญ่และตัวเอียง ลองด้วยตัวคุณเอง
แหล่งข้อมูล
- MDN Web Docs element.classList
