javascript - 如何使用 css 上的 "auto"值检查真正的宽度

Question

我有一个循环:

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

所有图像都具有此 css:

height: 80px; width: auto;

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

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

这将是所有内部 img 宽度的总和

这是我在这里的第一篇文章，如有错误请见谅。 请帮忙，谢谢!

Answer 1

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

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

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

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

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

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

在@Rudi 的回答中，有 offsetWidth，还有 clientWidth。这不包括 margin 。