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

我有这个元素：

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

返回

100%

。是否可以使用JavaScript实际获取元素的像素宽度？

试试jQuery：

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

---

您希望获得计算的宽度。尝试：

.offsetWidth

（即：

this.offsetWidth='50px'

或

var w=this.offsetWidth

）

---

你可能也喜欢这样。

没有一个答案能回答vanilla JS中的问题，我想要一个vanilla的答案，所以我自己做了

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

编辑：

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的方法。

这个jQuery适合我：

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

这将得到计算的宽度

---

通过这种方式，您可以动态调用属性字符串

您可以使用

offsetWidth

。有关更多信息，请参阅此和

console.log（“宽度：”+document.getElementsByTagName（“div”）[0]。offsetWidth+“px”）
div{border:1px solid#F00；}
您必须使用computedstyle或jqueryIt的easy当前非标准。但是，它在大多数浏览器中都可以工作，并且包含在草稿中。如果clientWidth和offsetWidth都返回0，那么可以做什么？这将返回%的宽度，但不带%符号。这将给出%而不是px值。如果宽度css为
100%
，则该值不工作/存在问题@towry是否愿意解释问题所在，以便在需要时更正我的答案？我五年前写过这篇文章。几天前我刚刚遇到这个问题，假设初始css是
width:100%
，然后我使用
getComputedStyle
以像素为单位获取宽度，但它总是返回空值，但在超时回调中，它可以获得正确的像素值。
function getInnerWidth(elem) {
    return parseFloat(window.getComputedStyle(elem).width);
}

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

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

yourItem.style['cssProperty']