Javascript Element Stil

Question

Ich bin neugierig, warum dies ein

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

nichts nicht alarmiert wird. Natürlich kann ich schreiben <div style = "width:100px"> dann alles funktioniert gut, aber es ist nicht gut für mich, ich brauche CSS. Hier finden Sie eine jsfiddle demo

So genaue Frage ist: warum dieser Code nicht Breite von div Alarm und wie warnt es, wenn die Breite von CSS gegeben ist?

Answer 1

Das JavaScript .style bezieht sich nur auf Inline-Stile für das Element.

Siehe Documentation.

Wenn Sie die Breite eines Elements erhalten möchten, sollten Sie offsetWidth verwenden.

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

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

Answer 2

Die .style ist inline style="width:100px;" nur ...

Wenn es in CSS ist (statt Inline) benötigen Sie getComputedStyle -

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

Answer 3

Wie bereits erwähnt an anderer Stelle ist das Problem, dass HTMLElement.style die Werte von der style attr. abruft Element des Elements; wie Sie Ihren Stil mit CSS sind einstellen, müssen Sie stattdessen window.getComputedStyle(element, null).width verwenden:

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>

Referenzen:

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

Answer 4

Der Stil gibt Zugriff nur auf Informationen, die in elem.style eingegeben werden. In Ihrem Beispiel sagt Stil nichts über den in CSS definierten Rand aus. Verwenden Sie getComputedStyle().

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

alert(computedStyle.width); 

jsfiddle demo