JavaScript: أنماط DOM

آخر تحديث: 2026-10-13

بعد تعلم كيفية تغيير محتوى الصفحة وهياكلها بـ JS، الخطوة التالية هي التحكم في الأنماط — جعل العناصر تغير اللون، تظهر/تختفي، أو تبدل السمات. CSS يتعامل مع الأنماط الثابتة، JS يتعامل مع الأنماط الديناميكية، و معاً يتيحان التفاعلية.

دوال DOM ذات صلة：element.style classList class

1. خاصية 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>

▶ مثال: قراءة وكتابة خاصية style

2. className و classList

التلاعب بـ class للعنصر هو الطريقة الأكثر شيوعاً لتغيير الأنماط بـ JS — تحدد الفئات مسبقاً في CSS، ثم JS فقط يضيف أو يزيل أسماء الفئات.

(1) className

className هو سلسلة، والتعيين عليها سي يستبدل جميع الفئات الموجودة.

<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>

(2) classList

classList هو كائن DOMTokenList يوفر طرقاً لإضافة وإزالة وتبديل الفئات دون التأثير على فئات أخرى.

▶ مثال: تبديل السمات

▶ مثال: الإظهار والإخفاء

3. getComputedStyle

element.style يمكنه فقط قراءة الأنماط المضمنة. كيف تقرأ الأنماط المحددة في ملفات CSS أو أوسام <style>؟ الجواب هو getComputedStyle.

<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>

▶ مثال: الحصول على الأنماط المحسوبة

4. cssText للأنماط الجماعية

إذا كنت بحاجة لتعيين عدة أنماط مضمنة على عنصر دفعة واحدة، كتابة style.xxx = ... سطر بسطر مطولة. cssText تتيح لك كتابتها جميعاً دفعة واحدة.

<div id="box">أنماط جماعية</div>
<script>
const element = document.getElementById('box');
element.style.cssText = 'color: red; font-size: 20px; padding: 10px;';
</script>

▶ مثال: أنماط جماعية بـ cssText

دوال DOM ذات صلة：element.style classList class

❓ أسئلة شائعة

📖 ملخص

• element.style يعمل فقط على الأنماط المضمنة؛ لا يمكنه قراءة القواعد من ملفات CSS. أسماء الخصائص يجب أن تستخدم camelCase عند الكتابة.
• تعيين className يستبدل جميع الفئات. استخدام classList مع add/remove/toggle أكثر أماناً.
• getComputedStyle يقرأ النمط النهائي المحسوب للعنصر؛ قيمة الإرجاع للقراءة فقط.
• cssText يعين الأنماط المضمنة جماعياً، لكن التعيين يستبدل الأنماط المضمنة الموجودة.

📝 تمارين

1. أساسي: أنشئ صفحة بـ 3 أزرار (أحمر/أخضر/أزرق). عند النقر، استخدم style.backgroundColor لتغيير لون خلفية الصفحة.
2. متوسط: استخدم classList.toggle لتنفيذ ميزة "تمييز" — انقر على فقرة لتبديل فئة تمييز (خلفية صفراء)، انقر مرة أخرى لإزالتها.
3. تحدي: نفّذ "وضع ليل بسيط" — تبديل بزر، استخدم getComputedStyle لقراءة لون الخلفية الحالي لتحديد الوضع، واعرض "الوضع الحالي: نهار/ليل" على الصفحة.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن