Question

我有这个元素：

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

我希望得到它的宽度（以像素为单位）。我刚试过这个：

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

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

Answer 1

document.getElementById('banner-contenedor').clientWidth

Answer 2

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

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

你可能也喜欢this answer在SO。

Answer 3

没有一个答案可以解决香草JS中的问题，我想要一个香草的回答，所以我自己做了。

clientWidth包含填充，offsetWidth包含其他所有内容（jsfiddle link）。你想要的是获得计算出的样式（jsfiddle link）。

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);
}

Answer 4

您可以使用offsetWidth。有关详情，请参阅此 post 和 question 。

＆＃13;

console.log("width:" + document.getElementsByTagName("div")[0].offsetWidth + "px");

＆＃13;

div {border: 1px solid #F00;}

＆＃13;

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

＆＃13;

Answer 5

尝试jQuery：

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

Answer 6

这个jQuery对我有用：

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

这将获得计算宽度

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

Answer 7

yourItem.style['cssProperty']

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

从样式设置为％的元素获取宽度（以像素为单位）？

7 个答案: