दिलचस्प पोस्ट
एक JSON स्ट्रिंग के निर्माण में विशेष वर्णों से बचने के लिए कैसे? Python http कनेक्शन के लिए प्रमाणित प्रॉक्सी कैसे निर्दिष्ट करें? खोज में एक निर्देशिका को बाहर कैसे करें आदेश फोन में फोनगैप खुला लिंक `Constexpr` और` const` के बीच का अंतर पायथन में आईपी पते को कैसे मान्य करें? खोल वाइल्डकार्ड वर्ण विस्तार बंद करो? सी सरणी के पास एक सरणी परिवर्तन ईवेंट पर रेडियो का उपयोग कैसे करें? विंडो। ओपन और पोस्ट विधि द्वारा पैरामीटर पास करें ओएसएक्स सिएरा (10.12), एल कैपिटन (10.11), योसेमाइट (10.10), मावेरिक्स (10.9), माउंटेन शेर (10.8) या ओएसएक्स शेर (10.7) पर जावा ओएचएमई कहां है? जावास्क्रिप्ट में सरणी तत्वों को हटाया जा रहा है – विचलित करें विष्ठापन प्रभावी जीआईएफ / छवि रंग परिमाणीकरण? स्विफ्ट स्ट्रिंग में चरित्र का सूचक ढूंढना हो सकता है कि एक से वापसी पर ऑपरेटिंग जिसमें "बस"

जावास्क्रिप्ट में HTML तत्व का शैली मान कैसे प्राप्त करें?

मैं किसी तत्व से शैली को पुनर्प्राप्त करने का एक तरीका तलाश रहा हूं जिस पर शैली टैग द्वारा एक शैली निर्धारित की गई है।

<style> #box {width: 100px;} </style> 

शरीर में

 <div id="box"></div> 

मैं पुस्तकालयों के उपयोग के बिना सीधे जावास्क्रिप्ट की तलाश कर रहा हूँ

मैंने निम्नलिखित की कोशिश की, लेकिन रिक्त स्थान प्राप्त रखें:

 alert (document.getElementById("box").style.width); alert (document.getElementById("box").style.getPropertyValue("width")); 

मैंने देखा कि मैं केवल उपर्युक्त का उपयोग करने में सक्षम हूं अगर मैंने जावास्क्रिप्ट का उपयोग करके शैली निर्धारित की है, लेकिन स्टाइल टैग के साथ में असमर्थ है I

वेब के समाधान से एकत्रित समाधान "जावास्क्रिप्ट में HTML तत्व का शैली मान कैसे प्राप्त करें?"

element.style संपत्ति आपको केवल उस सीएसएस गुणों को जानते हैं, जिन्हें उस तत्व (प्रोग्राम के रूप में परिभाषित किया गया है, या तत्व की शैली विशेषता में परिभाषित किया गया है) के रूप में परिभाषित किया गया था, आपको गणना शैली प्राप्त करनी चाहिए

यह एक क्रॉस-ब्राउज़र के तरीके में इतना आसान नहीं है, आईई का अपना तरीका, element.currentStyle संपत्ति के माध्यम से होता है, और अन्य ब्राउज़रों द्वारा कार्यान्वित DOM Level 2 मानक तरीका, document.defaultView.getComputedStyle माध्यम से होता है। document.defaultView.getComputedStyle विधि।

उदाहरण के लिए, दो तरीकों में अंतर है, IE element.currentStyle संपत्ति की उम्मीद है कि आप सीसीएस प्रॉपर्टी नामों में उपयोग करते हैं, जो कि दो या दो से ज्यादा शब्दों को maxHeight कैस (जैसे maxHeight , fontSize , backgroundColor fontSize , आदि) से बना है, मानक तरीके से उम्मीद है कि डैश से अलग शब्द (जैसे max-height , font-size , background-color , आदि)

साथ ही, आईई element.currentStyle शॉर्ट स्टाइल उन सभी आकारों को यूनिट में लौटाएगा, जिन्हें वे निर्दिष्ट किए गए थे (जैसे 12pt, 50%, 5em), मानक तरीके से हमेशा वास्तविक आकार को पिक्सल में गिना जाएगा।

मैंने कुछ समय पहले एक क्रॉस-ब्राउज़र फ़ंक्शन बनाया जो आपको क्रॉस-ब्राउज़र तरीके से गणना की गई शैलियों को प्राप्त करने की अनुमति देता है:

 function getStyle(el, styleProp) { var value, defaultView = (el.ownerDocument || document).defaultView; // W3C standard way: if (defaultView && defaultView.getComputedStyle) { // sanitize property name to css notation // (hypen separated words eg. font-Size) styleProp = styleProp.replace(/([AZ])/g, "-$1").toLowerCase(); return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp); } else if (el.currentStyle) { // IE // sanitize property name to camelCase styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) { return letter.toUpperCase(); }); value = el.currentStyle[styleProp]; // convert other units to pixels on IE if (/^\d+(em|pt|%|ex)?$/i.test(value)) { return (function(value) { var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left; el.runtimeStyle.left = el.currentStyle.left; el.style.left = value || 0; value = el.style.pixelLeft + "px"; el.style.left = oldLeft; el.runtimeStyle.left = oldRsLeft; return value; })(value); } return value; } } 

इसके बाद के संस्करण कुछ मामलों के लिए आदर्श नहीं हैं, उदाहरण के लिए रंगों के लिए, मानक विधि आरजीबी (…) नोटेशन में रंग लौटाएंगे, IE पर वे उन्हें परिभाषित किए जाने पर वापस देंगे

मैं वर्तमान में इस विषय में एक लेख पर काम कर रहा हूं, आप यहां इस फ़ंक्शन पर किए गए परिवर्तनों का अनुसरण कर सकते हैं ।

JQuery में , आप alert($("#theid").css("width")) कर सकते हैं alert($("#theid").css("width"))

– अगर आपने jQuery पर नज़र नहीं लिया है, तो मैं इसकी अत्यधिक सिफारिश करता हूं; यह कई सरल जावास्क्रिप्ट कार्यों को सरल बनाता है

अद्यतन करें

रिकॉर्ड के लिए, यह पोस्ट 5 साल पुराना है। वेब विकसित, चले गए हैं, आदि। ऐसा करने के लिए सादे पुरानी जावास्क्रिप्ट के साथ तरीके हैं, जो बेहतर है।

मेरा मानना ​​है कि आप अब खिड़की का उपयोग करने में सक्षम हैं.गेट कॉम्प्यूटेडस्टाइल ()

प्रलेखन एमडीएन

 var style = window.getComputedStyle(element[, pseudoElt]); 

Jquery में .css () का उपयोग करके शैली टैग को अभिगम और संशोधित किया जा सकता है

उदाहरण के लिए:

 var color = $( this ).css( "background-color" ); $( "#result" ).html( "That div is <span style='color:" + color + ";'>" + color + "</span>." );