如何在css上使用“auto”值检查真正的宽度

Question

我有一个循环：

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;"/>';
}

所有图片都有这个css：

身高：80px; 宽度：自动;

最后循环之后我需要给div这个css

的document.getElementById（ '眼'）。style.width

这将是所有内在的img widhts的总和

这是我在这里的第一篇文章，对于错误感到抱歉。 请帮忙，谢谢！

Answer 1

您可以使用多种方法，例如getBoundingClientRect() ，它返回位置和宽度/高度的绝对值：

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

请注意，它不包括边框或填充，只包括内框。

然后是getComputedStyle() - 这将返回一个后缀为“px”的字符串，因此我们还需要使用parseInt()解析它：

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

两者都以像素为单位返回大

和offsetWidth的答案一样，有offsetWidth和clientWidth 。 这不包括保证金。

Answer 2

也许你正在寻找这个：

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