CSS फ़ाइलों से गुणों को JavaScript में पढ़ना

CSS फ़ाइल में निर्दिष्ट गुणों को एक विशेष फ़ंक्शन getComputedStyles का उपयोग करके पढ़ा जा सकता है।

आइए देखें कि यह कैसे किया जाता है। मान लीजिए कि हमारे पास निम्नलिखित तत्व है:

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

मान लीजिए कि इस तत्व के लिए निम्नलिखित स्टाइल निर्धारित हैं:

#elem {
	width: 100px;
	color: red;
	font-size: 20px;
}

आइए एक चर में तत्व का संदर्भ प्राप्त करें:

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

अब प्राप्त तत्व के संदर्भ को फ़ंक्शन getComputedStyles के पैरामीटर के रूप में पास करें:

let computedStyle = getComputedStyle(elem);

परिणामस्वरूप, हमें एक ऑब्जेक्ट प्राप्त होगा, जिसमें हमारे तत्व के लिए CSS गुणों के मान होंगे। आइए इसका उपयोग करके, उदाहरण के लिए, रंग पढ़ें:

console.log(computedStyle.color); // 'red' आउटपुट करेगा

और अब चौड़ाई:

console.log(computedStyle.width); // '100px' आउटपुट करेगा

और अब फ़ॉन्ट आकार:

console.log(computedStyle.fontSize); // '20px' आउटपुट करेगा

तत्व के लिए निम्नलिखित स्टाइल निर्धारित हैं:

#elem {
	width: 200px;
	height: 200px;
}

बटन पर क्लिक करने पर तत्व की चौड़ाई और ऊंचाई आउटपुट करें।

तत्व के लिए निम्नलिखित स्टाइल निर्धारित हैं:

#elem {
	width: 200px;
	height: 200px;
}

बटन पर क्लिक करने पर तत्व की चौड़ाई और ऊंचाई को दोगुना कर दें।