Javascript element style

Question

I\'m curious why this one

    fdsfsd

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


        

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;
}

  fdsfsd

References:

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