DOM
सीएसएस शैलियों का उपयोग करना
खोज…
टिप्पणियों
यहाँ विस्तृत इंटरफेस DOM स्तर 2 शैली में पेश किए गए थे, जो लगभग उसी समय DOM स्तर 2 कोर के रूप में सामने आए थे और इस प्रकार इसे "DOM संस्करण 2 का हिस्सा" माना जाता है।
इनलाइन शैलियों को पढ़ना और बदलना
इनलाइन शैली
आप किसी HTML तत्व की इनलाइन CSS स्टाइल को आसानी से पढ़ सकते हैं या उसकी style प्रॉपर्टी को एडिट कर सकते हैं।
निम्नलिखित तत्व मान लें:
<div id="element_id" style="color:blue;width:200px;">abc</div>
इसके साथ जावास्क्रिप्ट लागू किया गया:
var element = document.getElementById('element_id');
// read the color
console.log(element.style.color); // blue
//Set the color to red
element.style.color = 'red';
//To remove a property, set it to null
element.style.width = null;
element.style.height = null;
हालांकि, अगर width: 200px; बाहरी CSS स्टाइलशीट में सेट किए गए थे, element.style.width = null का कोई प्रभाव नहीं होगा। इस स्थिति में, शैली को रीसेट करने के लिए, आपको इसे initial : element.style.width = 'initial' पर सेट करना होगा।
एक स्टाइलशीट से शैलियों को पढ़ना और बदलना
element.style केवल CSS गुणों को इनलाइन सेट करता है, एक तत्व विशेषता के रूप में। हालांकि, शैलियों को अक्सर बाहरी स्टाइलशीट में सेट किया जाता है। किसी तत्व की वास्तविक शैली को window.getComputedStyle(element) साथ एक्सेस किया जा सकता है। यह फ़ंक्शन सभी शैलियों की वास्तविक गणना मूल्य युक्त ऑब्जेक्ट देता है।
रीडिंग और बदलते इनलाइन स्टाइल उदाहरण के समान हैं, लेकिन अब स्टाइल एक स्टाइलशीट में हैं:
<div id="element_id">abc</div>
<style type="text/css">
#element_id {
color:blue;
width:200px;
}
</style>
जावास्क्रिप्ट:
var element = document.getElementById('element_id');
// read the color
console.log(element.style.color); // '' -- empty string
console.log(window.getComputedStyle(element).color); // rgb(0, 0, 255)
// read the width, reset it, then read it again
console.log(window.getComputedStyle(element).width); // 200px
element.style.width = 'initial';
console.log(window.getComputedStyle(element).width); // 885px (for example)