दिलचस्प पोस्ट
प्रोग्रामेटिक रूप से एक बार यूआईनेवियाई दृश्य और मॉडेल दृश्य दोनों को खारिज करना एक स्थान समान स्ट्रिंग की पहचान की तुलना क्यों करता है? यह कैसे बताने के लिए कि क्या <video> तत्व वर्तमान में खेल रहा है? एंड्रॉइड लॉलीपॉप में प्राथमिक और उच्चारण रंग को कैसे परिवर्तित करें _really_ प्रोग्रामेटिक रूप से? स्ट्रिंग के लिए XmlDocument कन्वर्ट करें सी ++ सीखने से पहले सी सीखना चाहिए? मैं एक फ़ाइल में एक पंक्ति को कैसे बदलू, हटाना या सम्मिलित करूँ, या पर्ल में एक फ़ाइल की शुरुआत में संलग्न कैसे करूं? मैं जावास्क्रिप्ट में एक संख्या को कैसे गोल करूं? एएसपी.नेट एमवीसी सीएमएस के लिए डेटाबेस से गतिशील रूट sizeof ऑपरेटर के साथ समस्या यूनिवर्सल इमेज लोडर एंड्रॉइड का उपयोग कैश क्लिअरिंग के लिए कैसे करें? पूर्णांक अतिप्रवाह और अपरिभाषित व्यवहार Angular.js: कैसे $ eval काम करता है और यह क्यों वेनिला eval से अलग है? आधुनिक रीजक्स इंजन पार्स की किस तरह की औपचारिक भाषाएं हो सकती हैं? जांचें कि तत्व DOM में दिखाई दे रहा है या नहीं

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

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

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

शरीर में

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

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

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

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

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

Solutions Collecting From Web of "जावास्क्रिप्ट में 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>." );