The JavaScript style class return empty string

Question

When i use style property on JavaScript for an existence element it return to me an empty string

alert(element.style.width);

JavaScript return an empty alert box i tried this with many predeclared css property but the same output

var images =    document.querySelectorAll(".slider_image");

document.getElementById("next").onclick = function() {
   for (var i = 0; i < images.length; i++) {
   alert(images[i].style.width);
   }
};

And here is the html

  <div id="first-part">
  <div id="slider">
    <img src="img/1.jpg" class="slider_image" id="1"/>
    <img src="img/2.jpg" class="slider_image" id="2"/>
    <img src="img/3.jpg" class="slider_image" id="3"/>
    <img src="img/next.png" id="next-img"/>
  </div>
  <span id="next">Next</span>  <span id="before">Before</span>
</div>

And here is my css :

.slider_image{
  width:100%;
  position:relative;
  right:0px;
}

What might cause this ?

See [this Stackoverflow question](http://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript) for more information. — Pointy, Jan 07 '15 at 16:52

score 8 · Accepted Answer · answered Jan 07 '15 at 16:51

8

The .style object only includes style properties directly set on the DOM element. Properties determined from CSS are not visible that way.

answered Jan 07 '15 at 16:51

Pointy

405,095
59
585
614

2

In order to find "calculated styles", check out `getComputedStyles` ( https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle ) – Timo D Jan 07 '15 at 16:53
But how should i do when i want to edit this value – Abdou Jan 07 '15 at 17:08
@Abdou you can *set* styles on the `.style` object freely. You just can't use it to examine styles inherited via CSS. – Pointy Jan 07 '15 at 17:12

The JavaScript style class return empty string

1 Answers1