获取新添加元素的宽度

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 Demo

jQuery Demo

如果有人能想到其他问题或解决方案，请为答案做出贡献。

Answer 2

试试这个：

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