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?

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?

• javascript
• css

4 Answers 4

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().

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/9kwap3zy/7/

The style gives access only to information which is put into elem.style. In your example style doesn’t tell anything about the margin defined in CSS. Use getComputedStyle().

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

alert(putedStyle.width);

jsfiddle demo

The .style is inline style="width:100px;" only...

If it's in CSS (rather than inline) you need getComputedStyle -

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