जावास्क्रिप्ट तत्व शैली

Question

मैं क्यों यह एक

<div class = "overlay"> 
    fdsfsd 
</div> 
.overlay{ 
    width: 100px; 
    height: 200px; 
    background-color:red; 
} 
alert(document.getElementsByClassName("overlay")[0].style.width); 

कुछ भी नहीं चेतावनी नहीं है उत्सुक हूँ। बेशक मैं <div style = "width:100px"> लिख सकता हूं तो हमेशा कुछ ठीक काम करता है, लेकिन यह मेरे लिए अच्छा नहीं है, मुझे सीएसएस की आवश्यकता है। यहां आप jsfiddle demo

तो सटीक प्रश्न यह है कि: यह कोड div की चौड़ाई को सतर्क क्यों नहीं कर रहा है और सीएसएस द्वारा चौड़ाई दी जाती है तो इसे कैसे चेतावनी दी जाती है?

Answer 1

जावास्क्रिप्ट .style केवल तत्व पर इनलाइन शैलियों से संबंधित है।

Documentation देखें।

यदि आप किसी तत्व की चौड़ाई प्राप्त करना चाहते हैं तो आपको offsetWidth का उपयोग करना चाहिए।

document.getElementsByClassName("overlay")[0].offsetWidth 

http://jsfiddle.net/9kwap3zy/7/

Answer 2

.style इनलाइन style="width:100px;" केवल है ...

यदि यह (बल्कि इनलाइन से) सीएसएस में है आप getComputedStyle की जरूरत है -

https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle

Answer 3

के रूप में उल्लेख किया अन्यत्र, समस्या यह है कि HTMLElement.stylestyle attr से मान प्राप्त करता है तत्व का ibute; आप सीएसएस के साथ अपनी शैली के रूप में स्थापित कर रहे हैं, आप के बजाय window.getComputedStyle(element, null).width उपयोग करने की आवश्यकता:

var elem = document.getElementsByClassName("overlay")[0], 
 
    width = window.getComputedStyle(elem, null).width; 
 

 
console.log(width);

.overlay { 
 
    width: 100px; 
 
    height: 200px; 
 
    background-color: red; 
 
}

<div class="overlay"> 
 
    fdsfsd 
 
</div>

संदर्भ:

• HTMLElement.style।
• window.getComputedStyle()।

Answer 4

शैली केवल उस जानकारी तक पहुंच प्रदान करती है जिसे elem.style में रखा गया है। आपकी उदाहरण शैली में सीएसएस में परिभाषित मार्जिन के बारे में कुछ भी नहीं बताता है। getComputedStyle() का प्रयोग करें।

var computedStyle = getComputedStyle(document.getElementsByClassName("overlay")[0], null) 

alert(computedStyle.width); 

jsfiddle demo