คู่มือ JavaScript Add Class: เพิ่มคลาสให้องค์ประกอบ HTML

ทำไมต้องเพิ่ม Class ด้วย JavaScript?

การเพิ่ม Class ให้องค์ประกอบช่วยเปลี่ยนรูปลักษณ์ (Styling) แบบไดนามิกเมื่อผู้ใช้โต้ตอบ เช่น คลิกปุ่มแล้วสีพื้นหลังเปลี่ยน ทำให้เกิดประสบการณ์ผู้ใช้ที่ดียิ่งขึ้น

2 วิธีการเพิ่ม Class ใน JavaScript แบบ Vanilla

วิธีที่ 1: ใช้คุณสมบัติ className (Concatenation)

const addClass = () => {
  const element = document.getElementById('div');
  element.className += " background";
}

ใช้ตัวดำเนินการ += ต่อชื่อคลาสใหม่เข้าไปใน className เดิม

วิธีที่ 2: ใช้เมธอด classList.add() (แนะนำ)

const addClass = () => {
  const element = document.getElementById('div');
  element.classList.add("background");
}

วิธีนี้ปลอดภัยกว่า เพราะจัดการรายการคลาสได้โดยอัตโนมัติ ไม่ต้องกังวลเรื่องช่องว่างหรือคลาสซ้ำ

ตัวอย่างครบถ้วน

HTML

<div id="div"> Hello World </div>
<button onClick="addClass()"> Add Class </button>

CSS

.background { 
  background-color: blue; 
  color: white; 
}

JavaScript (เลือกใช้วิธีใดวิธีหนึ่ง)

// วิธี 1
const addClass = () => {
  const element = document.getElementById('div');
  element.className += " background";
}

// วิธี 2 (Best Practice)
const addClass = () => {
  const element = document.getElementById('div');
  element.classList.add("background");
}

เมื่อคลิกปุ่ม <div> จะเปลี่ยนพื้นหลังเป็นสีน้ำเงิน ตัวอักษรเป็นสีขาว

สรุป

การเพิ่ม Class แบบไดนามิกเป็นเทคนิคพื้นฐานสำคัญใน Front-end Development ควรใช้ classList.add() เพราะเป็นมาตรฐานที่ทันสมัยและลดโอกาสผิดพลาดได้ดีกว่า