Javascript 获取新添加元素的宽度

我需要使用JavaScript或jQuery获取新添加项的宽度。我知道如果需要将事件绑定到新添加的元素，可以使用事件委派或jQuery中的.on（）方法。但在本例中，我没有绑定事件，我只需要获取该元素的宽度。我该怎么做

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

试试这个：

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

获得宽度 您只需使用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

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

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

可能的问题

• 确保您的元素已创建、可见并且已将其添加到DOM中
• 元素包含浮动元素或绝对定位元素，因此未获得任何宽度
• 您正在尝试在DOM呈现之前检索元素宽度
• 确保您的元素不受任何样式表的影响，并且以某种方式成为内联元素

装载问题 确保脚本位于页面底部和/或使用jQuery的

.ready（）

方法：

$('#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

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

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

演示

---

如果有人能想到其他问题或解决方案，请提供答案。

我得到以下错误：TypeError:Window.getComputedStyle的参数1未实现接口元素。Jqueries

width（）

函数似乎工作正常：