एक DOM तत्व की प्रदर्शन संपत्ति को पुनः प्राप्त करना: सही मूल्य का अनावरण करना

प्रदान किया गया HTML कोड अलग-अलग डिस्प्ले के साथ एक पैराग्राफ और एक एंकर का परिचय देता है शैलियाँ। हालाँकि, स्टाइल प्रॉपर्टी के माध्यम से इन शैलियों को पुनः प्राप्त करने से अप्रत्याशित रूप से खाली स्ट्रिंग्स दिखाई देती हैं। ऐसा क्यों है, और आप प्रदर्शन संपत्ति को सटीक रूप से कैसे पुनः प्राप्त कर सकते हैं?

खाली स्ट्रिंग की पहेली

प्रारंभिक भ्रम पैदा होता है क्योंकि .style.* गुण सीधे शैली विशेषता पर मैप होते हैं, लागू शैली पर नहीं। इसका मतलब है कि आप अनिवार्य रूप से इनलाइन शैली घोषणा की जांच कर रहे हैं, जो हमेशा गणना की गई शैली को प्रतिबिंबित नहीं कर सकता है।

समाधान: getComputedStyle

वास्तविक लागू शैली प्राप्त करने के लिए विरासत में मिली संपत्तियों सहित, आपको getComputedStyle विधि का उपयोग करने की आवश्यकता है। यह विधि एक DOM तत्व को एक तर्क के रूप में लेती है और एक CSSStyleDeclaration ऑब्जेक्ट लौटाती है जिसमें परिकलित शैली मान होते हैं।

प्रदान किए गए कोड को getComputedStyle का उपयोग करने के लिए निम्नानुसार संशोधित किया जा सकता है:

var a = (document.getElementById('a'));
alert(getComputedStyle(a).display);
var p = (document.getElementById('p'));
alert(getComputedStyle(p).display);
p.style.display = 'none';
alert(getComputedStyle(p).display);

अब, पहला अलर्ट एंकर टैग के लिए "कोई नहीं" प्रदर्शित करेगा, दूसरा अलर्ट पैराग्राफ तत्व के लिए "ब्लॉक" प्रदर्शित करेगा, और तीसरा अलर्ट प्रदर्शित करेगा जानबूझकर प्रदर्शन सेटिंग के बाद "कोई नहीं"। यह तत्वों की गणना की गई प्रदर्शन शैलियों को सटीक रूप से दर्शाता है। तत्वों की दृश्यता. प्रस्तुतिकरण को तर्क से अलग करके, आप अपने कोड को सरल बना सकते हैं और इसे शैली-संबंधी समस्याओं से कम प्रभावित कर सकते हैं।