जावास्क्रिप्ट से अमान्य कस्टम सीएसएस गुणों तक पहुंच

- उपसर्ग का उपयोग करके कस्टम सीएसएस गुण बनाना संभव है। हालाँकि, क्या इन कस्टम गुणों को जावास्क्रिप्ट से एक्सेस किया जा सकता है?

उत्तर दुर्भाग्य से नहीं है, कम से कम क्रोम और फ़ायरफ़ॉक्स जैसे प्रमुख ब्राउज़रों में। अमान्य नामों वाले कस्टम सीएसएस गुणों को सीएसएस पार्सर द्वारा आसानी से अनदेखा कर दिया जाता है। उदाहरण के लिए, निम्नलिखित सीएसएस पर विचार करें:

div {
    -my-foo: 42;
}

भले ही यह सीएसएस किसी div पर लागू किया गया हो, जावास्क्रिप्ट का उपयोग करके -my-foo प्रॉपर्टी तक पहुंचने का प्रयास कुछ भी नहीं लौटाएगा। CSSStyleDeclaration ऑब्जेक्ट में केवल वैध गुण होंगे, जैसे चौड़ाई या ऊंचाई।

यह व्यवहार CSSStyleDeclaration विनिर्देशों के अनुसार है। विशिष्टताओं में कहा गया है कि ऑब्जेक्ट में केवल "निर्दिष्ट गुण" शामिल होने चाहिए, जिसका अर्थ है कि कस्टम गुणों को मान्यता नहीं दी गई है। हालाँकि, कुछ कार्यान्वयन कस्टम गुणों तक पहुँचने का समर्थन कर सकते हैं, लेकिन इसकी गारंटी नहीं है।

यदि आपके एप्लिकेशन के लिए कस्टम सीएसएस गुणों तक पहुँच महत्वपूर्ण है, तो आप कच्चे सीएसएस पाठ को पार्स करके जावास्क्रिप्ट की सीमाओं को बायपास कर सकते हैं। यह शैली तत्व की इनरटेक्स्ट प्रॉपर्टी का उपयोग करके किया जा सकता है:

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

हालांकि यह दृष्टिकोण काम करता है, लेकिन ऐसा नहीं है CSSStyleDeclaration ऑब्जेक्ट से सीधे गुणों तक पहुँचने जैसा सीधा। इसके अलावा, इसके लिए सीएसएस टेक्स्ट के अतिरिक्त विश्लेषण और हेरफेर की आवश्यकता होती है।