في هذا الدرس 6تصفّح المواضيع
يمتلك كل عنصر في الصفحة كائناً مدمجاً باسم el.style يمثل سمة التنسيق السطرية style="..." الخاصة به. يتيح لك تعديل خاصية مفردة مثل el.style.color دون المساس ببقية الأنماط السطرية، كما يعيد إسناد النص الفارغ "" الخاصية إلى وضعها الأصلي في ملفات التنسيق.
نظراً لأن الشرطة العادية - تعني عملية الطرح الحسابية في JavaScript، تُحذف الشرطات من أسماء خصائص CSS المركبة وتُكتب بصيغة الجمل camelCase:
| الاسم في ملف CSS | المقابل في el.style | مثال القيمة المسندة |
|---|---|---|
background-color | el.style.backgroundColor | "#f2ebf9" |
font-size | el.style.fontSize | "18px" |
border-radius | el.style.borderRadius | "12px" |
z-index | el.style.zIndex | "10" |
من أكثر الهفوات شيوعاً كتابة رقم مجرد مثل bar.style.width = 75؛ إذ يتجاهل المتصفح الأرقام الخالية من الوحدات بصمت! أرفق دائماً وحدة القياس كنص مثل "75%" أو "24px" (باستثناء الخصائص العديمة الوحدة بطبيعتها مثل opacity).
let pct = 40;
function advanceProgress() {
pct = pct >= 100 ? 20 : pct + 20;
const bar = document.getElementById('prog-fill');
bar.style.width = pct + '%';
bar.textContent = pct + '%';
}ميز بدقة بين طرق الإخفاء: فإن تفعيل el.hidden = true أو el.style.display = "none" يطوي مساحة العنصر تماماً فتقترب العناصر المجاورة مكانه، بينما el.style.visibility = "hidden" يخفي رسمه فقط مع إبقاء مساحته محجوزة في التخطيط.
انتبه لحقيقة جوهرية: لا تقرأ el.style.fontSize سوى ما كُتب مباشرةً داخل سمة style="..." السطرية، وترجع نصاً فارغاً للأنماط القادمة من ملفات CSS! ولقراءة التنسيق النهائي الفعلي المحسوب على الشاشة استدعِ الدالة المخصصة للقراءة window.getComputedStyle(el).
تعتمد أنظمة التصميم الحديثة على متغيرات CSS المبدوءة بشرطتين مثل --card-accent؛ وبما أن اسمها يبدأ بشرطتين، نحدثها برمجياً عبر الدالة النظيفة el.style.setProperty("--card-accent", "#0f766e").
function switchTealAccent() {
const card = document.getElementById('theme-demo');
card.style.setProperty('--box-tone', '#0f766e');
const realBg = window.getComputedStyle(card).borderColor;
document.getElementById('css-out').textContent = 'Computed border: ' + realBg;
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس تعديل الأنماط المباشرة عبر el.style وصياغة camelCase ووحدات القياس النصية وطرق الإخفاء وقراءة القيم الفعلية عبر getComputedStyle() وتحديث متغيرات CSS بـ setProperty(). الخطوة التالية: انتقل إلى درس «إدارة الفئات عبر classList في JavaScript» للتحكم النظيف بفئات التنسيق الجاهزة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTMLElement.style كائن التنسيق السطري element.style
- كائن يمثل سمة التنسيق السطرية للعنصر ويتيح قراءة وتعديل الخصائص المباشرة بصيغة camelCase.
- للمراجعة
- 02 window.getComputedStyle() دالة التنسيق المحسوب getComputedStyle
- دالة مخصصة للقراءة ترجع القيم النهائية الفعلية لتنسيق العنصر بعد دمج ملفات CSS والأنماط السطرية.
- للمراجعة
- 03 style.setProperty() دالة ضبط متغيرات التنسيق setProperty
- دالة على كائن style تُستخدم لتحديث خصائص التنسيق ومتغيرات CSS المخصصة المبدوءة بشرطتين.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 PX PX
- CSS Pixels Unit
- وحدة قياس البكسل النصية التي يجب إرفاقها عند تعيين الأبعاد وأحجام الخطوط برمجياً.
- للمراجعة
- 02 RGB RGB
- Red Green Blue Color Model
- الصيغة اللونية القياسية التي توحد بها دالة getComputedStyle قيم الألوان المحسوبة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال شريط التقدم وانقر الزر عدة مرات لمشاهدة تحديث خاصية العرض مع وحدة النسبة المئوية.
-
افتح مثال متغير اللون وانقر الزر لتغيير --box-tone وقراءة لون الإطار المحسوب بالصيغة الفعلية.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.