क्या सभी तत्वों के सभी गुणों के उपयोग किए गए सीएसएस मान प्राप्त करने का क्रॉस-ब्राउज़र तरीका है?

Question

मैं किसी पृष्ठ पर सभी DOM तत्वों के उपयोग किए गए सीएसएस मान प्राप्त करने के लिए देख रहा हूं। जब मैं कहता हूँ "प्रयुक्त मूल्यों" मैं परिभाषा की चर्चा करते हुए कर रहा हूँ the W3C specification में निर्दिष्ट है:

6.1.3 प्रयुक्त मूल्यों

गणना मूल्यों दस्तावेज़ स्वरूपण के बिना जहाँ तक संभव हो कार्रवाई की जाती है। हालांकि, कुछ मान केवल तभी निर्धारित किए जा सकते हैं जब दस्तावेज़ तैयार किया जा रहा हो। उदाहरण के लिए, यदि तत्व की चौड़ाई इसके युक्त ब्लॉक का एक निश्चित प्रतिशत निर्धारित है, तो चौड़ाई निर्धारित नहीं की जा सकती है जब तक कि ब्लॉक की चौड़ाई निर्धारित नहीं की जाती है। प्रयुक्त मूल्य गणना मूल्य लेने और किसी भी शेष निर्भरता को पूर्ण मान में हल करने का परिणाम है।

ये वास्तविक पृष्ठ लेआउट के संबंध में गणना की गई अंतिम मान होनी चाहिए। Mozilla's docs का दावा है कि आप उपयोग किए गए मान प्राप्त करने के लिए window.getComputedStyle का उपयोग कर सकते हैं, लेकिन यह मुझे समझ में नहीं आता है क्योंकि गणना मूल्य मानों से अलग होते हैं (और मुझे उपयोग मूल्य चाहिए)। भले ही ये उपयोग किए गए मान हैं, मुझे यकीन नहीं है कि यह केवल फ़ायरफ़ॉक्स में काम करता है या नहीं। क्या सभी ब्राउज़रों में विश्वसनीय मूल्यों का विश्वसनीय तरीका प्राप्त करने का कोई तरीका है?

Answer 1

मेरा मानना ​​है कि getComputedStyle उस परिभाषा के अनुसार "उपयोग" मान लौटाता है। यह सभी प्रमुख आधुनिक ब्राउज़रों पर काम करता है। आईई के पहले संस्करण currentStyle के रूप में निकट समकक्ष प्रदान करते हैं। नोट परिभाषा के अंतिम वाक्य:

इस्तेमाल किया मूल्य परिकलित मान ले रहे हैं और एक निरपेक्ष मूल्य में किसी भी शेष निर्भरता को हल करने का परिणाम है।

(अंत में मेरे जोर।) जैसे, "इस्तेमाल किया मूल्य" मूल्य है कि वास्तव में इस्तेमाल किया है।

उदाहरण के लिए, इस कोड को मुझे पता चलता "500px" या इसी तरह, नहीं "50%":

HTML:

<div id="target" style="display: inline-block; width: 50%">x</div> 

जावास्क्रिप्ट:

(function() { 

    var target = document.getElementById("target"); 
    var style = window.getComputedStyle(target); 
    display("computed width = " + style.width); 

    function display(msg) { 
    var p = document.createElement('p'); 
    p.innerHTML = String(msg); 
    document.body.appendChild(p); 
    } 
})(); 

Live copy | source

Answer 2

आप ज्यादातर मामलों में jQuery या अन्य पसंदीदा लाइब्रेरी का उपयोग कर सकते हैं।

उदाहरण के लिए, आपके प्रश्न शीर्षक में font-size:100% है जो इसे लागू किया जा सकता है जिसे w/firebug पुनर्प्राप्त किया जा सकता है। लेकिन jQuery api साथ तुम इतनी की तरह इस्तेमाल किया मान प्राप्त कर सकते हैं:

$('#question-header .question-hyperlink').css('font-size');//run in console 
//or enter this in the url bar 
//javascript:alert($('#question-header .question-hyperlink').css('font-size')); 
//returns "23.06px" 

नायब पुस्तकालय इस पृष्ठ पर शामिल किया गया है, लेकिन यह एक बुकमार्कलेट कि jQuery और चुनाव आवश्यक गुण शामिल हैं बनाने के लिए काफी तुच्छ होगा।