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

我有这个要素：

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

我想获得它的宽度（以像素为单位）。我只是试过这个：

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

哪个返回100%。使用JavaScript能否实际获得元素的宽度（以像素为单位）？

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

您要获取计算的宽度。尝试：.offsetWidth

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

您可能也喜欢这个答案。

Vanilla JS的要求不是一个单一的答案，我想要一个香草的答案，所以我自己做了。

clientWidth包含padding，而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的方法。

您可以使用offsetWidth。请参阅此帖子和更多问题。

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

div {border: 1px solid #F00;}

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

试试jQuery：

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

这个jQuery为我工作：

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

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

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

yourItem.style['cssProperty']

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