Class List Object And Methods

👉 كائن classList للتحكم في أصناف العناصر (CSS Classes)

📌 ما هو classList؟

هو كائن موجود داخل أي عنصر HTML، يسمح لك بـ:

  • إضافة (class).
  • إزالة كلاس.
  • التحقق إذا كان الصنف موجودًا.
  • تبديل (toggle) الصنف.

بدلاً من استخدام element.className = ...
يمكنك استخدام element.classList بطريقة أكثر أمانًا ومرونة.

✅ أهم الدوال (methods) في classList
الدالةالوظيفة
add()إضافة صنف
remove()إزالة صنف
toggle()إذا موجود يزال، وإذا غير موجود يضاف
contains()هل الصنف موجود؟ يرجع true/false
replace(old, new)استبدال صنف بآخر
🧪 أمثلة عملية
🔹 HTML:
<div id="box" class="blue">مربع</div>
<button onclick="changeStyle()">تغيير</button>
JavaScript
const box = document.getElementById("box");

function changeStyle() {
  // إضافة صنف
  box.classList.add("rounded");

  // إزالة صنف
  box.classList.remove("blue");

  // تبديل صنف
  box.classList.toggle("shadow");

  // التحقق من وجود صنف
  if (box.classList.contains("shadow")) {
    console.log("الصنف shadow موجود");
  }

  // استبدال صنف بصنف آخر
  box.classList.replace("rounded", "circle");
}
JavaScript

✅ شرح كل دالة:

🟩 add(className)

element.classList.add("active");
JavaScript

يضيف الصنف active، وإذا كان موجودًا لا يكرره.

🟩 remove(className)

element.classList.remove("active");
JavaScript

يزيل الصنف إن كان موجودًا.

🟩 toggle(className)

element.classList.toggle("dark");
JavaScript

إذا كان dark موجودًا → يزيله.
إذا غير موجود → يضيفه.

🟩 contains(className)

if (element.classList.contains("hidden")) {
  console.log("العنصر مخفي");
}
JavaScript

يرجع true أو false.

🟩 replace(oldClass, newClass)

element.classList.replace("error", "success");
JavaScript

يستبدل الصنف error بـ success.

🟨 مثال تطبيقي: زر لتفعيل الوضع الليلي

<body>
  <button onclick="toggleDarkMode()">تبديل الوضع</button>
</body>
HTML
function toggleDarkMode() {
  document.body.classList.toggle("dark-mode");
}
JavaScript
.dark-mode {
  background-color: black;
  color: white;
}
CSS
✅ ملخص سريع:
الوظيفةالكود
إضافة صنفelement.classList.add("x")
إزالة صنفelement.classList.remove("x")
تبديل صنفelement.classList.toggle("x")
التحققelement.classList.contains("x")
استبدالelement.classList.replace("old", "new")