elemento di stile JavaScript

Question

Sono curioso di sapere perchè questo

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

non viene segnalata nulla. Naturalmente posso scrivere quindi tutto funziona, ma non va bene per me, ho bisogno di css. Qui potete trovare una domanda jsfiddle demo

Così esatto è: perché questo codice non viene segnalata la larghezza del div e come avviso se la larghezza è data da css?

Answer 1

JavaScript .style si riferisce solo agli stili incorporati sull'elemento.

Vedere Documentation.

Se si desidera ottenere la larghezza di un elemento, è necessario utilizzare offsetWidth.

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

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

Answer 2

L'.style è solo in linea style="width:100px;" ...

Se è in CSS (piuttosto che in linea) è necessario getComputedStyle -

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

Answer 3

Come notato altrove, il problema è che HTMLElement.style recupera i valori da style attr ibute dell'elemento; come si sta impostando il tuo stile con i CSS, è necessario utilizzare invece 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>

Riferimenti:

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

Answer 4

Lo stile dà l'accesso solo alle informazioni che viene messo in elem.style. Nel tuo esempio, lo stile non dice nulla sul margine definito in CSS. Utilizzare getComputedStyle().

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

alert(computedStyle.width); 

jsfiddle demo