الوصول إلى خصائص CSS المخصصة غير الصالحة من JavaScript

من الممكن إنشاء خصائص CSS مخصصة باستخدام البادئة -. ومع ذلك، هل يمكن الوصول إلى هذه الخصائص المخصصة من خلال جافا سكريبت؟

الإجابة للأسف هي لا، على الأقل في المتصفحات الرئيسية مثل Chrome وFirefox. يتم ببساطة تجاهل خصائص CSS المخصصة ذات الأسماء غير الصالحة بواسطة محلل CSS. على سبيل المثال، فكر في CSS التالي:

div {
    -my-foo: 42;
}

حتى إذا تم تطبيق CSS هذا على div، فإن محاولة الوصول إلى خاصية -my-foo باستخدام JavaScript لن تؤدي إلى أي شيء. سيحتوي كائن CSSStyleDeclaration على خصائص صالحة فقط، مثل العرض أو الارتفاع.

يتوافق هذا السلوك مع مواصفات CSSStyleDeclaration. تنص المواصفات على أن الكائن يجب أن يتضمن فقط "خصائص محددة"، مما يعني أنه لم يتم التعرف على الخصائص المخصصة. ومع ذلك، قد تدعم بعض التطبيقات الوصول إلى الخصائص المخصصة، ولكن هذا ليس مضمونًا.

إذا كان الوصول إلى خصائص CSS المخصصة أمرًا بالغ الأهمية لتطبيقك، فيمكنك تجاوز قيود JavaScript عن طريق تحليل نص CSS الأولي. يمكن القيام بذلك باستخدام خاصية النص الداخلي لعنصر النمط:

document.getElementsByTagName("style")[0].innerText

بينما يعمل هذا الأسلوب، إلا أنه ليس كذلك مباشرة مثل الوصول إلى الخصائص مباشرة من كائن CSSStyleDeclaration. علاوة على ذلك، فهو يتطلب تحليلًا ومعالجة إضافية لنص CSS.