दिलचस्प पोस्ट
urllib2 और json LINQ से एसक्यूएल और क्रमबद्ध परिणामों पर चलने वाला कुल एचटीटीपीएस के साथ, यूआरएल और अनुरोध बॉडी के रूप में संरक्षित अनुरोध हैडर हैं? समान रूप से एक क्षेत्र पर एन अंक वितरण इनपुट से पीएसपी लिखने के लिए फ़ाइल txt .NET सॉफ़्टवेयर का परीक्षण संस्करण कैसे बनाएं? स्थैतिक प्रारंभिक ब्लाकों संपूर्ण iOS ऐप के लिए एक डिफ़ॉल्ट फ़ॉन्ट सेट करें? सत्र और एचटीटीपीकॉन्टेक्स के बीच अंतर। वर्तमान सत्र Google मानचित्र में ज़ूम स्तर कैसे सेट करें निजी, सार्वजनिक और सुरक्षित विरासत के बीच अंतर एंड्रॉइड एडीबी, रन-एज का उपयोग करके डेटाबेस पुनः प्राप्त करें PHP – एक फाइल को सर्वर पर एक अलग फ़ोल्डर में ले जाएँ सी # का प्रयोग करके एसवीजी को पीएनजी में परिवर्तित करना Facet_wrap और तराजू = "मुक्त" के साथ व्यक्तिगत अक्ष की सीमा सेट करना ggplot2 में

जावास्क्रिप्ट के साथ एक सीएसएस मूल्य प्राप्त करें

मुझे पता है मैं जावास्क्रिप्ट के द्वारा एक सीएसएस मूल्य सेट कर सकता हूँ जैसे कि:

document.getElementById('image_1').style.top = '100px'; 

लेकिन, क्या मैं वर्तमान विशिष्ट शैली मूल्य प्राप्त कर सकता हूं? मैंने पढ़ा है कि मैं तत्व के लिए पूरी शैली कहां प्राप्त कर सकता हूं, लेकिन मुझे पूरे स्ट्रिंग को पार्स करने की ज़रूरत नहीं है यदि मुझे नहीं करना है।

वेब के समाधान से एकत्रित समाधान "जावास्क्रिप्ट के साथ एक सीएसएस मूल्य प्राप्त करें"

आप getComputedStyle() उपयोग कर सकते हैं

 var element = document.getElementById('image_1'), style = window.getComputedStyle(element), top = style.getPropertyValue('top'); 

जेएसफ़ैल्ड

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

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

उदाहरण के लिए, दो तरीकों में अंतर है, IE तत्व। झरना संपत्ति की उम्मीद है कि आप सीएसएस गुण नामों में से दो या दो से अधिक शब्दों के साथ camelcase (जैसे maxHeight, fontSize, backgroundcolor, आदि) से बना है, मानक तरीके से संपत्ति की उम्मीद है डैश से अलग शब्द (जैसे अधिकतम-ऊंचाई, फ़ॉन्ट-आकार, पृष्ठभूमि-रंग, आदि) ……

 function getStyle(el, styleProp) { var value, defaultView = (el.ownerDocument || document).defaultView; // W3C standard way: if (defaultView && defaultView.getComputedStyle) { // sanitize property name to css notation // (hyphen 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; } } 

मुख्य संदर्भ स्टैकेवरफ्लो

निम्न का उपयोग करें। यह मेरी मदद की

 document.getElementById('image_1').offsetTop 

शैलियां भी देखें

DOM के हेरफेर के बिना सीएसएस मूल्यों को जांचने के लिए क्रॉस-ब्राउज़र समाधान:

 function getStyleRuleValue(style, selector) { for (var i = 0; i < document.styleSheets.length; i++) { var mysheet = document.styleSheets[i]; var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules; for (var j = 0; j < myrules.length; j++) { if (myrules[j].selectorText && myrules[j].selectorText.toLowerCase() === selector) { return myrules[j].style[style]; } } } }; 

उपयोग:

 getStyleRuleValue('backgroundColor', '.chart-color') 

स्वच्छ संस्करण (लोअरकेस के लिए चयनकर्ता इनपुट को बल देता है, और अग्रणी बिना उपयोग के मामले की अनुमति देता है "।")

 function getStyleRuleValue(style, selector) { var selector_compare=selector.toLowerCase(); var selector_compare2= selector_compare.substr(0,1)==='.' ? selector_compare.substr(1) : '.'+selector_compare; for (var i = 0; i < document.styleSheets.length; i++) { var mysheet = document.styleSheets[i]; var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules; for (var j = 0; j < myrules.length; j++) { if (myrules[j].selectorText) { var check = myrules[j].selectorText.toLowerCase(); switch (check) { case selector_compare : case selector_compare2 : return myrules[j].style[style]; } } } } 

}

यदि आप इसे प्रोग्राममैटिक रूप से सेट करते हैं तो आप इसे केवल एक वैरिएबल (यानी document.getElementById('image_1').style.top तरह कॉल कर सकते हैं document.getElementById('image_1').style.top )। अन्यथा, आप हमेशा jQuery का उपयोग कर सकते हैं:

 <html> <body> <div id="test" style="height: 100px;">Test</div> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> alert($("#test").css("height")); </script> </body> </html> 

यदि आप लाइब्रेरी में हैं, तो क्यों नहीं MyLibrary और GetStyle

JQuery सीएसएस विधि को गलत नाम दिया गया है, सीएसएस शैलियों को स्थापित करने का एक तरीका है और जरूरी नहीं कि किसी तत्व की शैली गुणों के वास्तविक मूल्यों का प्रतिनिधित्व करता है।

सुरक्षा के मामले के रूप में, आप यह जांच कर सकते हैं कि इससे पहले कि आप पढ़ना चाहते हैं कि तत्व मौजूद है। यदि यह अस्तित्व में नहीं है, तो आपका कोड एक अपवाद फेंक देगा, जो आपके जावास्क्रिप्ट के बाकी हिस्सों पर निष्पादन को रोक देगा और संभावित रूप से उपयोगकर्ता को त्रुटि संदेश प्रदर्शित करेगा – अच्छा नहीं आप ईमानदारी से असफल होने में सक्षम होना चाहते हैं

 var height, width, top, margin, item; item = document.getElementById( "image_1" ); if( item ) { height = item.style.height; width = item.style.width; top = item.style.top; margin = item.style.margin; } else { // Fail gracefully here } 

ऊपर दिए गए डोम हेरफेर के बिना क्रॉस-ब्राउज़र समाधान काम नहीं करता क्योंकि यह पहला मिलान नियम देता है, न कि अंतिम। अंतिम मिलान नियम एक है जो लागू होता है। यहां एक कामकाजी संस्करण है:

 function getStyleRuleValue(style, selector) { let value = null; for (let i = 0; i < document.styleSheets.length; i++) { const mysheet = document.styleSheets[i]; const myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules; for (let j = 0; j < myrules.length; j++) { if (myrules[j].selectorText && myrules[j].selectorText.toLowerCase() === selector) { value = myrules[j].style[style]; } } } return value; } 

हालांकि, जटिल चयनकर्ताओं के मामले में यह सरल खोज काम नहीं करेगा