How to check really width with “auto” value on css

Question

I have a loop:

var takediv = document.getElementById('eye');
for(var i=0; i<kategoria.length; i++){
   takediv.innerHTML +=^
       '<img alt="'+(kategoria.length-i)+'" '+
       'onclick="changef(this.alt)" '+
       'src="mobile/img/pic/'+loc+"/mini/"+kategoria[kategoria.length-i-1][0]+'" '+
       'style="cursor: pointer;"/>';
}

All images are having this css:

height: 80px; width: auto;

And finally after loop I need to give the div this css

document.getElementById('eye').style.width

which will be sum of all inner img widhts

It is my first post here so sorry for mistakes. Please help, and thanks!

Answer 1

You can use several approaches, for example getBoundingClientRect() which returns absolute values for position and width/height:

var width = document.getElementById('eye').getBoundingClientRect().width;

Just note it does not include border or padding, only the inner box.

Then there is getComputedStyle() - this will return a string suffixed with "px" so we also need to parse it using parseInt() :

var width = parseInt(getComputedStyle(document
                .getElementById('eye'))
                .getPropertyValue("width"), 10);

Both returns size in pixels.

And as in @Rudi's answer, there is offsetWidth , and also clientWidth . This won't include margin.

Answer 2

也许你正在寻找这个：

var width = document.getElementById('eye').offsetWidth;