CODEWITHSUNDEEP
javascriptcss
mondayguy
mondayguy

Reputation: 991

Javascript element style

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?

Upvotes: 8

Views: 877

Answers (4)

kasper Taeymans
kasper Taeymans

Reputation: 7026

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 computedStyle = getComputedStyle(document.getElementsByClassName("overlay")[0], null)

alert(computedStyle.width);

jsfiddle demo

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 10

Rycochet
Rycochet

Reputation: 2938

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

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

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

Upvotes: 0

Ashley Medway
Ashley Medway

Reputation: 7301

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/

Upvotes: 5

Related Questions