CSS Styling & Stylesheets

كيف نُضيف ونُغيّر تنسيقات العناصر باستخدام JavaScript

🔹 أنواع تنسيق العناصر (Styling Methods)
  1. التنسيق المباشر عبر style (Inline Styling)
  2. إضافة أو إزالة أصناف CSS عبر classList
  3. استخدام ملفات CSS خارجية (Stylesheets)
  4. إضافة ملفات CSS برمجيًا (Dynamic Stylesheet)
✅ أولًا: التنسيق باستخدام خاصية style

يمكنك الوصول لأي خاصية CSS باستخدام element.style.<property>

📌 مثال:
<div id="box">مربع</div>
HTML
const box = document.getElementById("box");

// تغيير الألوان والحجم
box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.padding = "20px";
box.style.borderRadius = "10px";


/////////////////////

box.style.cssText = `
  background-color: blue;
  color: white;
  padding: 20px;
  border-radius: 10px;
`;
JavaScript

خصائص CSS مثل background-color → تكتب في JS هكذا: backgroundColor (CamelCase)

القيم يجب أن تكون نصوص: "20px" وليس 20px

✅ ثانيًا: استخدام الأصناف (classes) – الأفضل
📌 HTML:
<div id="box" class="red">مربع</div>
JavaScript
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
CSS
box.classList.remove("red");
box.classList.add("blue");
JavaScript

✅ هذه الطريقة أفضل لأن:

  • فصل بين الوظيفة (JS) والشكل (CSS)
  • أسهل في التعديل لاحقًا
✅ ثالثًا: التعامل مع ملفات CSS خارجية (Stylesheets)
📌 مثال على إضافة ملف CSS خارجي:
<link rel="stylesheet" href="style.css" id="main-style">
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>تبديل ملف CSS</title>
  
  <!-- ملف CSS الأساسي -->
  <link id="main-style" rel="stylesheet" href="main-style.css">
</head>
<body>

  <h1>مرحبا بك!</h1>
  <p>سيتم تغيير المظهر عند الضغط على الزر.</p>

  <button onclick="switchToDarkMode()">تفعيل الوضع الداكن</button>

  <script>
    function switchToDarkMode() {
      // حذف ملف CSS الحالي
      const oldStyle = document.getElementById("main-style");
      if (oldStyle) {
        oldStyle.remove();
      }

      // إنشاء ملف CSS جديد
      const link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = "dark.css"; // تأكد أن هذا الملف موجود
      document.head.appendChild(link);
    }
  </script>

</body>
</html>
JavaScript
✅ رابعًا: إنشاء CSS داخل JavaScript (Dynamic Styles)
const style = document.createElement("style");
style.textContent = `
  body {
    background-color: black;
    color: white;
  }
`;
document.head.appendChild(style);
JavaScript
🟦 استخدام getComputedStyle لقراءة القيم الفعلية من CSS

دالة getComputedStyle() في JavaScript تُستخدم للحصول على القيم النهائية (الحقيقية) للخصائص CSS الخاصة بأي عنصر في الصفحة بعد أن يقوم المتصفح بحسابها، سواء تم تعيينها في CSS أو تمت وراثتها أو حُددت افتراضيًا.

الشكل العام:

const styles = window.getComputedStyle(element);
JavaScript

element: هو العنصر الذي تريد معرفة خصائصه.

styles: كائن يحتوي على جميع خصائص CSS المحسوبة (بما في ذلك القيم الافتراضية).

✅ ملاحظات هامة:
  • getComputedStyle لا تعطيك القيم التي كتبتها بنفسك في CSS بالضبط، بل القيم المُحسَبة النهائية التي يستخدمها المتصفح بعد دمج الأنماط المختلفة (CSS خارجي، داخلي، inline، الوراثة…).
  • يتم إرجاع القيم كنصوص (string)، مثلاً: block أو 16px.

✅ مثال 1: الحصول على لون النص لعنصر

<div id="box" style="color: red;">مرحبا</div>

<script>
  const box = document.getElementById("box");
  const styles = window.getComputedStyle(box);
  console.log(styles.color); // ستطبع مثلاً: rgb(255, 0, 0)
</script>
JavaScript

✅ مثال 2: معرفة قيمة الحشو (padding)

<style>
  #myDiv {
    padding: 20px;
  }
</style>

<div id="myDiv">نص</div>

<script>
  const div = document.getElementById("myDiv");
  const computed = getComputedStyle(div);
  console.log("Padding top:", computed.paddingTop); // "20px"
</script>
JavaScript

✅ مثال 3: معرفة القيمة حتى لو لم تكن محددة يدويًا

<div id="box">مرحبا</div>

<script>
  const box = document.getElementById("box");
  const styles = getComputedStyle(box);
  console.log("Display:", styles.display); // مثلاً: block
</script>
JavaScript

حتى لو لم تحدد display في CSS، فإن getComputedStyle ستعطيك القيمة الافتراضية التي يطبقها المتصفح (مثلًا block للـ <div> أو inline للـ <span>).

✅ الفرق بين style و getComputedStyle

الخاصية.stylegetComputedStyle()
يعرض فقط الخصائص المكتوبة بالـ inline✅ نعم❌ لا
يعطي القيم المحسوبة النهائية❌ لا✅ نعم
يتأثر بالـ CSS الخارجي أو الوراثة؟❌ لا✅ نعم

مثال توضيحي:

<style>
  #example {
    color: green;
  }
</style>

<div id="example">مرحبا</div>

<script>
  const el = document.getElementById("example");
  console.log(el.style.color);             // ""
  console.log(getComputedStyle(el).color); // rgb(0, 128, 0)
</script>
JavaScript

✅ استخدام عملي: التحقق من ظهور العنصر

const el = document.getElementById("element");
const style = getComputedStyle(el);
if (style.display === "none" || style.visibility === "hidden") {
  console.log("العنصر مخفي");
}
JavaScript
const styles = getComputedStyle(box);
console.log(styles.backgroundColor); // rgb(0, 0, 255)
JavaScript

تُستخدم لقراءة التنسيق المطبّق سواء من inline أو ملف خارجي.

📌 ملخص:

الطريقةالوصفالأفضلية
element.styleتعديل مباشر لخصائص CSSسريع ولكن غير مرن
classListإضافة/إزالة أصناف CSS✅ الأفضل تنظيمًا
link / styleإضافة ملفات خارجيةمفيد للوضع الليلي وغيره
getComputedStyleقراءة خصائص CSS المطبقةللقراءة فقط