86

我有这个元素：

<div style="width: 100%; height: 10px;"></div>

我想得到它的像素宽度。我刚试过这个：

document.getElementById('banner-contenedor').style.width

哪个返回100%。是否可以使用 JavaScript 以像素为单位实际获取元素的宽度？

4

7 回答 7

113 
document.getElementById('banner-contenedor').clientWidth
于 2012-08-13T03:30:32.400 回答
16

您想获得计算出的宽度。尝试：.offsetWidth

（即：this.offsetWidth='50px'或var w=this.offsetWidth）

您可能还喜欢关于 SO 的这个答案。

于 2012-08-13T03:30:47.563 回答
8

没有一个答案能满足香草 JS 中的要求，我想要一个香草的答案，所以我自己做了。

clientWidth 包括填充，offsetWidth 包括其他所有内容（jsfiddle 链接）。您想要的是获得计算的样式（jsfiddle 链接）。

function getInnerWidth(elem) {
    return parseFloat(window.getComputedStyle(elem).width);
}

编辑：getComputedStyle是非标准的，并且可以以像素以外的单位返回值。如果元素有滚动条，一些浏览器还会返回一个值，该值会考虑滚动条（这反过来会给出与 CSS 中设置的宽度不同的值）。如果元素有滚动条，则必须通过从offsetWidth.

function getInnerWidth(elem) {
    var style = window.getComputedStyle(elem);
    return elem.offsetWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - parseFloat(style.borderLeft) - parseFloat(style.borderRight) - parseFloat(style.marginLeft) - parseFloat(style.marginRight);
}

尽管如此，根据我目前的经验，这可能不是我建议遵循的答案，我会求助于不那么依赖 JavaScript 的方法。

于 2015-03-16T20:00:32.750 回答
3

您可以使用offsetWidth. 有关更多信息，请参阅此帖子和问题。

console.log("width:" + document.getElementsByTagName("div")[0].offsetWidth + "px");
div {border: 1px solid #F00;}
<div style="width: 100%; height: 10px;"></div>

于 2017-05-09T07:32:35.117 回答
1

试试 jQuery：

$("#banner-contenedor").width();
于 2012-08-13T03:30:21.870 回答
-1

这个 jQuery 对我有用：

$("#banner-contenedor").css('width');

这将为您提供计算出的宽度

http://api.jquery.com/css/

于 2015-08-11T08:11:51.307 回答
-4 
yourItem.style['cssProperty']

这样你就可以动态调用属性字符串

于 2016-12-15T22:15:35.553 回答