أنماط DOM
بعد تعلم كيفية تغيير محتوى الصفحة وهياكلها بـ JS، الخطوة التالية هي التحكم في الأنماط — جعل العناصر تغير اللون، تظهر/تختفي، أو تبدل السمات. CSS يتعامل مع الأنماط الثابتة، JS يتعامل مع الأنماط الديناميكية، و معاً يتيحان التفاعلية.
خاصية style
element.style يتوافق مع نمط HTML المضمن (style="..."). يمكنه فقط قراءة/كتابة الأنماط المضمنة — لا يمكنه الوصول إلى القواعد المحددة في ملفات CSS أو أوسام <style>.
<div id="box">مرحباً بالنمط</div>
<script>
const element = document.getElementById('box');
element.style.color = 'red';
element.style.fontSize = '20px'; // ملاحظة: CSS font-size → JS fontSize
</script>
⚠️ أسماء خصائص CSS التي تحتوي على شرطات يجب تحويلها إلى camelCase في JS:
background-color → backgroundColor، font-size → fontSize. هذه واحدة من أكثر المفاجآت شيوعاً للمبتدئين.
مثال: قراءة وكتابة خاصية style
HTML
<div id="box" style="color: blue;">مرحباً بالنمط</div>
<script>
const box = document.getElementById('box');
console.log('اللون الحالي:', box.style.color);
box.style.color = 'red';
box.style.fontSize = '24px';
box.style.backgroundColor = '#f0f0f0';
box.style.padding = '10px';
box.style.borderRadius = '8px';
</script>
className و classList
التلاعب بـ class للعنصر هو الطريقة الأكثر شيوعاً لتغيير الأنماط بـ JS — تحدد الفئات مسبقاً في CSS، ثم JS فقط يضيف أو يزيل أسماء الفئات.
className
className هو سلسلة، والتعيين عليها سي يستبدل جميع الفئات الموجودة.
HTML
<div id="demo1" class="item">عنصر 1</div>
<div id="demo2" class="item">عنصر 2</div>
<script>
const el1 = document.getElementById('demo1');
el1.className = 'active'; // يستبدل، يبقى فقط 'active'
const el2 = document.getElementById('demo2');
el2.className += ' highlight'; // يُلحق، لكن بدائي وعرضة للأخطاء
console.log('el1.className:', el1.className);
console.log('el2.className:', el2.className);
</script>
💡 تعيين
className مثل إعادة ضبط المصنع لهاتفك ثم تثبيت تطبيقات جديدة — كل شيء قبلها يختفي. في معظم الحالات، classList أكثر أماناً.
classList
classList هو كائن DOMTokenList يوفر طرقاً لإضافة وإزالة وتبديل الفئات دون التأثير على فئات أخرى.
| الطريقة | الوصف |
|---|---|
add('cls') |
إضافة فئة |
remove('cls') |
إزالة فئة |
toggle('cls') |
يزيل إذا موجودة، يضيف إذا غير موجودة |
contains('cls') |
يتحقق ما إذا كانت الفئة موجودة، يُرجع منطقي |
مثال: تبديل السمات
HTML
<style>
.dark { background: #222; color: #fff; }
.light { background: #fff; color: #222; }
body { transition: background 0.3s, color 0.3s; padding: 20px; }
</style>
<body class="light">
<h2>عرض تبديل السمات</h2>
<p>انقر الزر للتبديل بين السمات الفاتحة والداكنة</p>
<button id="toggleBtn">بدل السمة</button>
</body>
<script>
const body = document.body;
const btn = document.getElementById('toggleBtn');
btn.addEventListener('click', function() {
body.classList.toggle('dark');
body.classList.toggle('light');
});
</script>
مثال: الإظهار والإخفاء
HTML
<style>
.hidden { display: none; }
.panel { border: 1px solid #ccc; padding: 15px; margin-top: 10px; }
</style>
<button id="togglePanel">إظهار/إخفاء اللوحة</button>
<div id="panel" class="panel">هذا محتوى اللوحة</div>
<script>
const panel = document.getElementById('panel');
const btn = document.getElementById('togglePanel');
btn.addEventListener('click', function() {
panel.classList.toggle('hidden');
btn.textContent = panel.classList.contains('hidden') ? 'إظهار اللوحة' : 'إخفاء اللوحة';
});
</script>
getComputedStyle
element.style يمكنه فقط قراءة الأنماط المضمنة. كيف تقرأ الأنماط المحددة في ملفات CSS أو أوسام <style>؟ الجواب هو getComputedStyle.
HTML
<div id="box">عنصر اختبار</div>
<script>
const element = document.getElementById('box');
const style = window.getComputedStyle(element);
console.log(style.color); // "rgb(0, 0, 0)"
console.log(style.fontSize); // "16px"
</script>
💡
getComputedStyle يُرجع النمط النهائي المحسوب للعنصر — نتيجة دمج المتصفح لجميع مصادر CSS (المضمن، أوسام النمط، ملفات CSS، الوراثة). قيمة الإرجاع للقراءة فقط.
مثال: الحصول على الأنماط المحسوبة
HTML
<style>
#measured { font-size: 18px; color: green; margin: 20px; }
</style>
<div id="measured">قِس أنماطي</div>
<script>
const el = document.getElementById('measured');
console.log('اللون من سمة style:', el.style.color);
console.log('اللون من النمط المحسوب:', getComputedStyle(el).color);
console.log('حجم الخط من النمط المحسوب:', getComputedStyle(el).fontSize);
console.log 'الهامش من النمط المحسوب:', getComputedStyle(el).margin);
</script>
cssText للأنماط الجماعية
إذا كنت بحاجة لتعيين عدة أنماط مضمنة على عنصر دفعة واحدة، كتابة style.xxx = ... سطر بسطر مطولة. cssText تتيح لك كتابتها جميعاً دفعة واحدة.
HTML
<div id="box">أنماط جماعية</div>
<script>
const element = document.getElementById('box');
element.style.cssText = 'color: red; font-size: 20px; padding: 10px;';
</script>
⚠️ تعيين
cssText سي يستبدل جميع الأنماط المضمنة الموجودة. للإلحاق، استخدم +=: element.style.cssText += '; color: red;'.
مثال: أنماط جماعية بـ cssText
<div id="box">أنماط جماعية</div>
<script>
const box = document.getElementById('box');
box.style.cssText = 'color: white; background: #4CAF50; padding: 15px; border-radius: 8px; font-size: 18px; text-align: center;';
</script>
📖 ملخص
element.styleيعمل فقط على الأنماط المضمنة؛ لا يمكنه قراءة القواعد من ملفات CSS. أسماء الخصائص يجب أن تستخدم camelCase عند الكتابة.- تعيين
classNameيستبدل جميع الفئات. استخدامclassListمعadd/remove/toggleأكثر أماناً. getComputedStyleيقرأ النمط النهائي المحسوب للعنصر؛ قيمة الإرجاع للقراءة فقط.cssTextيعين الأنماط المضمنة جماعياً، لكن التعيين يستبدل الأنماط المضمنة الموجودة.
❓ أسئلة شائعة
س لماذا
element.style.color لا يمكنه قراءة اللون المحدد في ملف CSS؟ج خاصية
style تتوافق فقط مع style="..." المضمن. القواعد من ملفات CSS وأوسام <style> خارج نطاقها. استخدم getComputedStyle(element).color لقراءة القيمة النهائية.س هل يمكن لـ
classList.toggle إضافة أو إزالة بشكل مشروط؟ج نعم.
classList.toggle('cls', force) يأخذ معلمة ثانية: true يفرض الإضافة، false يفرض الإزالة. يعادل force ? add : remove.س هل أستخدم
style أم classList لتعديل الأنماط؟ج القاعدة بسيطة: استخدم
style لتغييرات النمط المؤقتة لمرة واحدة، استخدم classList مع فئات CSS لتبديل السمات/السمات. الأخيرة تبقي الأنماط في CSS والمنطق في JS، مما يسهّل الصيانة.📝 تمارين
- أساسي: أنشئ صفحة بـ 3 أزرار (أحمر/أخضر/أزرق). عند النقر، استخدم
style.backgroundColorلتغيير لون خلفية الصفحة. - متوسط: استخدم
classList.toggleلتنفيذ ميزة "تمييز" — انقر على فقرة لتبديل فئة تمييز (خلفية صفراء)، انقر مرة أخرى لإزالتها. - تحدي: نفّذ "وضع ليل بسيط" — تبديل بزر، استخدم
getComputedStyleلقراءة لون الخلفية الحالي لتحديد الوضع، واعرض "الوضع الحالي: نهار/ليل" على الصفحة.