Your for
is not traversing the recovered elements. You need to change it to:
for(var i = 0; i < objs.length; i++) ...
Then, when you enter a value in a style
you need to specify the measure you are using. This means that in css 100
it does not represent a measure but 100px
. When you retrieve the value in offsetWidth
the value returned is only 100
.
You need to set px
"manually" by changing the width value of your slide
class:
window.onload = function() {
var slidewidth = document.getElementById("slideshow").offsetWidth;
var objs = document.getElementsByClassName("slide");
for(var i = 0; i < objs.length; i++) {
objs[i].style.width = slidewidth + "px";
}
}
.slideshow {
width: 100px;
height: auto;
background-color: #FF0000;
}
.slide {
width: 10px;
height: auto;
background-color: #00FF00;
}
<div class="slideshow" id="slideshow">
<div class="slideshowarea">
<div class="slide">a</div>
<div class="slide">b</div>
<div class="slide">c</div>
<div class="slide">d</div>
</div>
</div>
If the width value of slideshow
is in the css, you can retrieve it directly, without needing to include px
as a measure of your css, using getComputedStyle :
var slidewidth = window.getComputedStyle(document.getElementById("slideshow")).width;