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

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)

您可能也喜欢这个答案.

Answer 3

没有一个答案可以解决香草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);
}