獲取新添加元素的寬度

Question

我需要使用JavaScript或jQuery獲取新添加項的寬度。 我知道如果我需要將事件綁定到新添加的元素，我可以在jQuery中使用事件委托或.on（）方法。 但在這種情況下，我沒有綁定一個事件，我只需要獲得該元素的寬度。 我怎樣才能做到這一點？

$('#box').width();    // won’t work
document.getElementById("box").width;     // won't work either

Answer 1

獲得寬度

你可以使用jQuery的.width()方法：

$('#box').width() // Should give you the pixel width with no px/rem/%

// Or plain ol' Vanilla JS
document.getElementById('box').offsetWidth

// Or mix it up
$('#box')[0].offsetWidth

可能的問題

• 確保您的元素已創建，可見，並將其添加到DOM。
• 您的元素包含浮動元素或絕對定位的元素，因此沒有獲得任何寬度。
• 您正試圖在DOM渲染之前檢索元素寬度。
• 確保您的元素不受任何樣式表的影響，並以某種方式變為內聯。

加載問題

確保您的腳本位於頁面底部和/或您正在使用jQuery的.ready()方法：

$(document).ready(function(){
    $('#box').width();
});

// Shorthand for the above
$(function(){
    $('#box').width();
});

演示

VanillaJS演示

jQuery演示

如果有人能想到其他問題或解決方案，請為答案做出貢獻。

Answer 2

嘗試這個：

var box = document.getElementById('box');
alert(window.getComputedStyle(box).width);