تعديل قيمة CSS باستخدام JavaScript

توفر JavaScript طريقة سهلة لتعيين قيم CSS المضمنة. ومع ذلك، يمكن أن تشكل هذه الطريقة تحديًا عند تعديل قيم CSS المحددة في أوراق الأنماط غير المضمنة.

استرداد قيم CSS من ورقة الأنماط

لاسترداد قيم CSS الموجودة غير مضمنة، تسمح JavaScript بالوصول إلى أوراق الأنماط من خلال document.styleSheets. تقوم هذه الوظيفة بإرجاع مصفوفة من كافة أوراق الأنماط الموجودة في المستند. لتحديد موقع ورقة الأنماط المحددة، استخدم خاصية document.styleSheets[styleIndex].href.

تعديل قواعد CSS لورقة الأنماط

بمجرد تحديد ورقة الأنماط المطلوبة، الخطوة التالية هو الحصول على مجموعة من قواعد CSS. يتم الوصول إلى هذه المصفوفة باستخدام خاصية القواعد لبرنامج Internet Explorer وcssRules لمعظم المتصفحات الأخرى. يمكن تمييز كل قاعدة من خلال خاصية النص المحدد الخاصة بها.

لتعديل قيمة CSS، قم بتعيين خاصية القيمة للقاعدة. سيبدو الكود المحدث مشابهًا لما يلي:

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

يسمح لك هذا الأسلوب بتغيير قيم CSS على مستوى العالم، وتحديث جميع العناصر بشكل فعال بالنمط المحدد.