दिलचस्प पोस्ट
आईओएस में वर्तमान डिवाइस भाषा प्राप्त करना? पायथन मल्टीप्रोसेसिंग पिकिंग त्रुटि JTable मॉडल श्रोता, बहुत जल्दी डाली गई पंक्तियों का पता लगाता है (इससे पहले कि वे खींचा जाते हैं) आईपैड के लिए सफ़ारी में jQuery का उपयोग कर टच इवेंट को कैसे पहचाना? क्या यह संभव है? एडब्ल्यूटी (कैलकुलेटर होमवर्क) में एक बटन स्रोत कैसे खोजना बड़ी सरणी आकारों में विभाजन की गलती एरो ऑपरेटर (->) सी में उपयोग एंड एंड एंड एंड के बीच का अंतर सी # त्रुटि: अभिभावक में कोई ऐसा कन्स्ट्रक्टर नहीं होता है, जो 0 तर्कों को लेता है 'सुडो मणि इंस्टॉलेशन' या 'मणि इंस्टॉलेशन' और रत्न रत्न जावास्क्रिप्ट स्तरीयजर के दौरान ASP.NET MVC में MaxJsonLength अपवाद jQuery। पर काम नहीं करता है लेकिन Windows पर msysgit के साथ एक Git सर्वर सेटअप करें एक चर, वस्तु, और संदर्भ के बीच अंतर क्या है? उपयोगकर्ता PHP कैसे चल रहा है यह कैसे जांचें?

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

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

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; } 

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