تحديث متغيرات CSS برمجياً | تعديل تنسيقات CSS عبر DOM في JavaScript

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تعتمد أنظمة التصميم الحديثة على متغيرات CSS المبدوءة بشرطتين مثل --card-accent؛ وبما أن اسمها يبدأ بشرطتين، نحدثها برمجياً عبر الدالة النظيفة el.style.setProperty("--card-accent", "#0f766e").

الصف 2 كود برمجي

JavaScript

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

جرّب بنفسك

الصف 3 ملاحظة هامة

الصف 4 ملاحظة هامة

الصف 5 ملاحظة هامة

الصف 6 ملاحظة هامة

الصف 7 ملاحظة هامة

خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

أتقنت في هذا الدرس تعديل الأنماط المباشرة عبر el.style وصياغة camelCase ووحدات القياس النصية وطرق الإخفاء وقراءة القيم الفعلية عبر getComputedStyle() وتحديث متغيرات CSS بـ setProperty(). الخطوة التالية: انتقل إلى درس «إدارة الفئات عبر classList في JavaScript» للتحكم النظيف بفئات التنسيق الجاهزة.

Updating CSS Variables setProperty تحديث متغيرات CSS برمجياً

شرح صفوف ومحتوى الفقرة

ملخص الدرس

ماذا تعلّمت في هذا الدرس؟

جميع فقرات هذا الدرس (تعديل تنسيقات CSS عبر DOM في JavaScript)