CSS - Variables With JavaScript
CSS - استخدام متغيرات CSS مع JavaScript
🔸 يمكنك الوصول إلى متغيرات CSS (التي تُعرف باستخدام --اسم) والتعديل عليها باستخدام JavaScript، مما يتيح لك إنشاء ثيمات ديناميكية أو تخصيص التصميم حسب تفاعل المستخدم.
🔹 تعريف متغير في CSS
:root {
--main-bg-color: lightblue;
}
🔹 الوصول إلى المتغير باستخدام JavaScript
// استهداف العنصر الجذر
let root = document.documentElement;
// الحصول على قيمة المتغير
let bgColor = getComputedStyle(root).getPropertyValue('--main-bg-color');
console.log(bgColor); // lightblue
📌 getComputedStyle() تُستخدم لقراءة الأنماط النهائية المحسوبة، ثم تُستخدم getPropertyValue لقراءة المتغير.
🔹 تعديل قيمة المتغير باستخدام JavaScript
document.documentElement.style.setProperty('--main-bg-color', 'lightgreen');
📌 هذا يغير القيمة في الوقت الحقيقي، ويمكنك استخدامه لإنشاء تأثيرات مثل التبديل بين الوضع الفاتح والداكن.
---🧪 مثال عملي كامل
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--main-bg-color: lightblue;
}
body {
background-color: var(--main-bg-color);
transition: background-color 0.5s ease;
}
</style>
</head>
<body>
<h2>تغيير لون الخلفية باستخدام JavaScript و CSS Variables</h2>
<button onclick="changeColor()">تغيير اللون</button>
<script>
function changeColor() {
document.documentElement.style.setProperty('--main-bg-color', 'lightcoral');
}
</script>
</body>
</html>
📌 ملاحظات هامة
- يمكن استخدام هذا الأسلوب لتخصيص واجهات المستخدم حسب تفاعل المستخدم.
- يفيد كثيرًا في أنظمة السمات (Themes) مثل تغيير ألوان الموقع بالكامل.
- يُفضل استخدام المتغيرات داخل
:rootلتكون عامة وسهلة التحكم.
تعليقات
إرسال تعليق