फ़ंक्शन getComputedStyle

फ़ंक्शन getComputedStyle तत्व के किसी भी CSS गुण का मूल्य प्राप्त करने की अनुमति देता है, यहाँ तक कि CSS फ़ाइल से भी।

वाक्य - विन्यास

javascriptlet वस्तु = getComputedStyle(तत्व);

विवरण

यह कैसे काम करता है (ध्यान दें: जैसा हम उम्मीद नहीं करते हैं): पैरामीटर के रूप में फ़ंक्शन तत्व लेता है, और एक वस्तु लौटाता है, जिसमें पारित तत्व के सभी CSS गुण शामिल होते हैं। आइए इस वस्तु को एक चर style में रखें। नाम मनमाना है, यह बस एक चर है - जैसा हम सोचेंगे, वैसे ही संदर्भित करेंगे:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style में CSS गुण हैं

आइए उदाहरण के लिए, चौड़ाई प्रदर्शित करें। यह इस प्रकार किया जाता है - style.width:

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.width);

उदाहरण के लिए, बाएँ padding प्रदर्शित करने के लिए - इस प्रकार करें - style.paddingLeft:

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

अगले उदाहरण में, हम अपने तत्व के लिए सभी हमारी रुचि वाले CSS गुण प्रदर्शित करेंगे:

html<div id="elem">text</div>

css#elem {
  width: 200px;
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // '30px' प्रदर्शित करेगा
console.log('borderTopWidth: ' + style.borderTopWidth); // '20px' प्रदर्शित करेगा
console.log('borderTopStyle: ' + style.borderTopStyle); // 'solid' प्रदर्शित करेगा

getComputedStyle की अशुद्धि

कभी-कभी फ़ंक्शन getComputedStyle चौड़ाई और ऊँचाई के साथ पूरी तरह से सही ढंग से काम नहीं करता है। यह इस तथ्य से संबंधित है कि padding और सीमा ब्लॉक का विस्तार करते हैं। अगले उदाहरण में ब्लॉक को चौड़ाई 200px दी गई है, और साथ ही सीमा और border भी दिया गया है। ब्लॉक की वास्तविक चौड़ाई 300px है, लेकिन getComputedStyle फिर भी 200px प्रदर्शित करेगा:

html<div id="elem">text</div>

css#elem {
  width: 200px;
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // '200px' प्रदर्शित करेगा
console.log('height: ' + style.height); // '200px' प्रदर्शित करेगा

यानी: ऐसा प्रतीत होता है कि getComputedStyle ब्लॉक के विस्तार को अनदेखा करता है और इसके आयामों को ऐसे दिखाता है जैसे कि यह विस्तार था ही नहीं। लेकिन यह सब नहीं है: स्क्रॉल बार की उपस्थिति या अनुपस्थिति का भी महत्व है - कुछ ब्राउज़र स्क्रॉल बार की चौड़ाई को getComputedStyle के माध्यम से गणना की गई चौड़ाई से घटा देते हैं, और कुछ नहीं घटाते हैं। कुल मिलाकर यहाँ सब कुछ क्रॉस-ब्राउज़र नहीं है और चौड़ाई और ऊँचाई निर्धारित करने के लिए getComputedStyle का उपयोग नहीं करना बेहतर है, बल्कि मेट्रिक्स का उपयोग करना है, जिसे हम थोड़ा नीचे पढ़ेंगे।

गणना की गई values

एक और बारीकियाँ है: यदि चौड़ाई % में निर्धारित है - तो getComputedStyle के काम करने के बाद हम इसे px में देखेंगे। यानी मूल रूप से हमें निर्धारित चौड़ाई नहीं मिलती है, बल्कि गणना की गई चौड़ाई मिलती है। निम्नलिखित उदाहरण देखें:

html<div id="elem">text</div>

css#elem {
  width: 30%; /* चौड़ाई % में दी गई है */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // चौड़ाई px में प्रदर्शित करेगा

यह भी देखें