Clever Geek Handbook

How to check really width with "auto" value in css

I have a loop:

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

All images have this CSS:

height: 80px; width: auto;

And finally, after the loop, I need to give the div this CSS

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

which will be the sum of all internal IMG widgets

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

+3


source to share


2 answers


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 that it does not include a border or padding, only an inner drawer.

Then exists getComputedStyle()

- this will return a string suffixed with "px", so we also need to parse it with parseInt()

:



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

Both return the size in pixels.

And as in @ Rudi's answer, there is offsetWidth

as well clientWidth

. This will not include margin.

+3


source


You may be looking for this:



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


source






More articles:


All Articles