JavaScript - DOM CSS

9.7 JavaScript - DOM CSS (تعديل الأنماط باستخدام JavaScript)

🔸 باستخدام JavaScript، يمكنك الوصول إلى خصائص CSS الخاصة بأي عنصر HTML وتعديلها مباشرة من خلال خاصية style الخاصة بالكائن.

---

🔹 تغيير خصائص CSS مباشرة

document.getElementById("box").style.color = "red";
document.getElementById("box").style.backgroundColor = "lightgray";
document.getElementById("box").style.fontSize = "20px";

📌 تُكتب خصائص CSS في JavaScript بصيغة camelCase مثل: backgroundColor بدلًا من background-color.

---

🔹 إخفاء/إظهار العناصر

document.getElementById("box").style.display = "none";    // إخفاء
document.getElementById("box").style.display = "block";   // إظهار

---

🔹 التبديل بين الأنماط

function toggleColor() {
  const el = document.getElementById("box");
  if (el.style.color === "blue") {
    el.style.color = "black";
  } else {
    el.style.color = "blue";
  }
}

---

🔹 إضافة/إزالة أصناف CSS باستخدام classList

const element = document.getElementById("box");

element.classList.add("highlight");     // إضافة كلاس
element.classList.remove("highlight");  // إزالة كلاس
element.classList.toggle("highlight");  // تبديل الكلاس

📌 هذه الطريقة مفيدة عند استخدام ملفات CSS خارجية.

---

⚠️ ملاحظات مهمة

• التعامل مع style يكون مباشرًا ويؤثر فورًا على العنصر.
• يفضل استخدام classList عند التفاعل مع أكثر من عنصر أو عند استخدام CSS خارجي.
• تغيير الأنماط عبر JavaScript يمنحك تحكمًا ديناميكيًا بتصميم الصفحة.