Javascript element style

Question

I'm curious why this one

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

is not alerting nothing. Of course I can write <div style = "width:100px"> then everthing works fine, but it is not good for me, I need css. Here you can find a jsfiddle demo

So exact question is: why this code is not alerting width of div and how alert it if width is given by css?

Answer 1

As noted elsewhere, the problem is that HTMLElement.style retrieves the values from the style attribute of the element; as you're setting your style with CSS, you need to instead use 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>

References:

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

Answer 2

The JavaScript .style only relates to inline styles on the element.

See Documentation.

If you want to get the width of an element you should use offsetWidth.

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

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