एचटीएमएल डोम शैली संपत्ति
उदाहरण
<h1> तत्व में लाल रंग जोड़ें:
document.getElementById("myH1").style.color = "red";
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
शैली गुण एक CSSStyleDeclaration ऑब्जेक्ट देता है, जो किसी तत्व की शैली विशेषता का प्रतिनिधित्व करता है।
स्टाइल प्रॉपर्टी का उपयोग विभिन्न सीएसएस गुणों का उपयोग करके किसी तत्व की विशिष्ट शैली को प्राप्त करने या सेट करने के लिए किया जाता है।
नोट: स्टाइल प्रॉपर्टी को स्ट्रिंग असाइन करके स्टाइल सेट करना संभव नहीं है, उदाहरण के लिए element .style = "color: red;"। किसी तत्व की शैली सेट करने के लिए, "CSS" गुण को शैली में जोड़ें और एक मान निर्दिष्ट करें, जैसे:
element.style.backgroundColor = "red"; // set the background color of an element to red
जैसा कि आप देख सकते हैं, सीएसएस गुणों को सेट करने के लिए जावास्क्रिप्ट सिंटैक्स सीएसएस (पृष्ठभूमि-रंग के बजाय पृष्ठभूमि रंग) से थोड़ा अलग है।
सभी उपलब्ध गुणों की सूची के लिए, हमारा Style Object Reference देखें ।
नोट: शैली संपत्ति केवल तत्व की इनलाइन शैली विशेषता में सेट सीएसएस घोषणाएं लौटाती है, उदाहरण के लिए
<p शैली = "रंग: लाल;">। दस्तावेज़ या बाहरी स्टाइल शीट में <head> अनुभाग से शैली नियमों के बारे में जानकारी प्राप्त करने के लिए इस संपत्ति का उपयोग करना संभव नहीं है।
हालांकि, आप document.getElementsByTagName() का उपयोग करके <style> तत्व को <head> से एक्सेस कर सकते हैं:
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
नोट: एलिमेंट .setAttribute("style", "...") मेथड के बजाय स्टाइल प्रॉपर्टी का उपयोग करने की अनुशंसा की जाती है , क्योंकि स्टाइल प्रॉपर्टी अन्य CSS प्रॉपर्टीज को ओवरराइट नहीं करेगी जिन्हें स्टाइल एट्रिब्यूट में निर्दिष्ट किया जा सकता है।
ब्राउज़र समर्थन
Property | |||||
---|---|---|---|---|---|
style | Yes | Yes | Yes | Yes | Yes |
वाक्य - विन्यास
वापसी शैली गुण:
element.style.property
शैली गुण सेट करें:
element.style.property = value
सम्पत्ति की कीमत
Value | Description |
---|---|
value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
टेक्निकल डिटेल
प्रतिलाभ की मात्रा: | एक CSSStyleDeclaration ऑब्जेक्ट, जो किसी तत्व की शैली विशेषता का प्रतिनिधित्व करता है |
---|---|
डोम संस्करण | डोम लेवल 2 सीएसएस |
और ज्यादा उदाहरण
उदाहरण
<p> तत्व की शीर्ष-सीमा का मान प्राप्त करें:
var x = document.getElementById("myP").style.borderTop;
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस ट्यूटोरियल
सीएसएस संदर्भ: सीएसएस गुण
HTML DOM संदर्भ: शैली वस्तु संदर्भ
HTML संदर्भ: HTML <शैली> टैग
❮ तत्व वस्तु