استخدام JavaScript لتغيير المعلمات الخاصة بـ CSS
- الصفحة السابقة مكاوي覆盖 الخاصة بـ CSS
- الصفحة التالية المعلمات الخاصة بـ CSS - استعلامات الوسائط
تغيير المتغيرات باستخدام JavaScript
يمكن للعناصر المتغيرة الوصول إلى DOM، مما يعني أنك يمكنك تغييرها باستخدام JavaScript.
هذا المثال يوضح كيفية إنشاء سكريبت لعرض وتغيير المتغير --blue الذي تم استخدامه في المثال السابق. إذا لم تكن مألوفًا بـ JavaScript، لا تقلق. يمكنك تعلم المزيد عن JavaScript في دروسنا الخاصة بـ JavaScript:
مثال
<script>
// الحصول على العنصر الجذر
var r = document.querySelector(':root');
// إنشاء دالة لاستنساخ قيمة المتغيرات
function myFunction_get() {
// الحصول على الأسلوب (الخصائص والقيم) للجذر
var rs = getComputedStyle(r);
// تنبيه القيمة المتغيرة --blue
تحذير("قيمة --blue هي: " + rs.getPropertyValue('--blue'));
}
// أنشئ وظيفة لتحديد قيمة المعلمة
function myFunction_set() {
// قم بتعيين قيمة المعلمة --blue إلى قيمة أخرى (في هذه الحالة "lightblue")
r.style.setProperty('--blue', 'lightblue');
}
</script>
دعم المتصفح
الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم هذا الخصائص بشكل كامل.
| الوظيفة | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
وظيفة var() الخاصة بـ CSS
| الوظيفة | الوصف |
|---|---|
| var() | إدراج قيمة المعلمات الخاصة بـ CSS |
- الصفحة السابقة مكاوي覆盖 الخاصة بـ CSS
- الصفحة التالية المعلمات الخاصة بـ CSS - استعلامات الوسائط
