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

Question

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

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

शरीर

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

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

।

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

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

मैंने देखा है कि मैं केवल शैली टैग के साथ करने के लिए ऊपर का उपयोग करने के अगर मैं शैली जावास्क्रिप्ट का उपयोग करने की स्थापना की है में सक्षम है, लेकिन में असमर्थ हूँ।

Answer 1

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

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

दो तरीके मतभेद हैं, उदाहरण के लिए, आईई element.currentStyle संपत्ति है कि आप CamelCase (जैसे maxHeight, fontSize, backgroundColor, आदि) में दो या अधिक शब्दों से बना सीसीएस संपत्ति के नाम का उपयोग उम्मीद करते हैं, मानक तरीका उम्मीद डैश से अलग शब्दों के साथ गुण (जैसे 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(/([A-Z])/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; 
    } 
} 

ऊपर समारोह कुछ मामलों के लिए सही नहीं है , मानक विधि rgb (...) अंकन, IE पर वे उन्हें वापस आ जाएगी, क्योंकि वे परिभाषित किया गया में रंग वापस आ जाएगी।

मैं वर्तमान में इस विषय में एक लेख पर काम कर रहा हूं, आप इस समारोह में किए गए परिवर्तनों का पालन कर सकते हैं here।

Answer 2

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

- अगर आप jQuery की समीक्षा के दौरान नहीं किया है, मैं इसकी अनुशंसा करते; यह कई सरल जावास्क्रिप्ट कार्यों को सहज बनाता है।

अद्यतन

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

Answer 3

मेरा मानना ​​है कि आप अब Window.getComputedStyle()

Documentation MDN

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

Answer 4

उपयोग करने के लिए jQuery में .css() का उपयोग करके शैली टैग पहुँचा जा सकता है में सक्षम हैं और

संशोधित

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

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