從樣式設置為 % 的元素中獲取以像素為單位的寬度？

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 ）

您可能也喜歡這個關於 SO 的答案。

Answer 3

沒有一個答案能滿足普通 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 的方法。

Answer 4

您可以使用offsetWidth 。 有關更多信息，請參閱這篇文章和問題。

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

 div {border: 1px solid #F00;}

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

Answer 5

試試 jQuery：

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

Answer 6

這個 jQuery 對我有用：

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

這將為您提供計算出的寬度

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

Answer 7

yourItem.style['cssProperty']

這樣你就可以動態調用屬性字符串