การเพิ่มคลาสให้อิลีเมนต์ HTML ทำได้ง่ายเมื่อใช้เมธอด add() ของพร็อพเพอร์ตี้ classList ใน JavaScript ก่อนอื่นมาดูสูตรทั่วไป — แล้วตามด้วยตัวอย่างปฏิบัติ
สูตร
var element = document.querySelector("selector") element.classList.add("class")ในตัวอย่างทั่วไปด้านบน เราค้นหา อิลีเมนต์ HTML แรก บนหน้าที่มี ชื่อตัวเลือก (selector) ที่ระบุ (อาจเป็นตัวเลือกอิลีเมนต์, คลาส, ฯลฯ) และเก็บอ้างอิงไว้ในตัวแปร
จากนั้นเราแนบเมธอด add() ของ พร็อพเพอร์ตี้ classList เข้ากับอิลีเมนต์ และระบุคลาสที่ต้องการเพิ่ม
ตัวอย่าง 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
