दिलचस्प पोस्ट
AngularJS: एक HTTP इंटरसेप्टर (सर्कुलर निर्भरता) में सेवा इंजेक्शन समानांतर.फोरएच बनाम टास्क.रुन और टास्क.जब सभी कोणीय फ़िल्टरों के लिए बहस पास करना एक तत्व के लिए लागू सभी सीएसएस नियम खोजें जावा इंटरफेस / कार्यान्वयन नामकरण सम्मेलन कैसे अजगर शब्दकोश में यादृच्छिक मूल्य प्राप्त करने के लिए JQuery UI स्वत: पूर्ण में सीमा परिणाम कुकीज़ को रेखांकित करता है, प्रारंभ तिथि सेट करें और तिथि की समय सीमा समाप्त करें MySQL में अंतिम पंक्ति का चयन करें जावा: स्विंग पुस्तकालय और थ्रेड सुरक्षा कई सीपीपीएस में एक ही हेडर को शामिल करने से कई परिभाषा त्रुटियां दोहराई गईं जेबटन के साथ जावा में एक कस्टम बटन बनाना क्या इकाई फ़्रेमवर्क में 0..1 से 0..1 रिश्ते को हासिल करना संभव है? मैं एंड्रॉइड स्विच कैसे कर सकता हूँ? Google खोज स्वत: पूर्ण API?

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