jQuery：在文档准备好并呈现后获取div-width

我正在尝试获取div容器的宽度，将另一个div中的另一个css属性设置为第一个的宽度，我知道在页面完全加载和渲染之后。

我有这个代码：

$().ready(function() { doLayout(); } function doLayout() { var $width = $("#sidebar").attr("width"); $("#content").css("left", width); }

问题是，在呈现页面之前调用ready，因此未设置width属性（或“undefined”）。如何确定当前宽度？

编辑：建议更改后我有这个小提琴，但代码有效，但在我的实际应用程序中它不是。所以问题出在其他地方，我想:(

使用load来等待load所有图像/外部内容，因为这些可能会改变元素尺寸：

 $(window).load(function () { doLayout(); });

然后要获得计算的宽度，请使用width ：

 $("#content").width(); // width in px

div不具有width属性。它可能具有width的CSS样式属性，您可以使用.css('width')检索它，但您可能还对返回JavaScript计算的宽度的outerWidth()或innerWidth()或width()感兴趣。

 $().ready(function() { doLayout(); } function doLayout() { var $width = $("#sidebar").css("width"); $("#content").css("left", width); }

关于上述width方法如何不同的一个很好的解释可以在文档中阅读，但只是简单地说;

 $(document).ready(function() { doLayout(); } function doLayout() { var width = $("#sidebar").css("width"); $("#content").css("left", width); }

有一个类似的问题（ offsetWidth为0，因为元素尚未呈现）。我做了一个简单的事：

 setTimeout(function() { ... do stuff that needed final width of object ... }, 0)

它似乎在我的情况下完美无缺。这基本上要求在javascript当前callstack为空时回调。

我想如果你在javascript中创建一个DOM元素并且它的宽度在外部CSS中定义为“100％”，则在所有javascript完成运行之前，不会计算此对象的offsetWidth （和offsetHeight ）。

通过使用setTimeout(callback, 0) ，它似乎在浏览器完成javascript当前调用后调用，并且花时间将所有CSS应用于新的DOM元素。

使用：

 $(document).ready(function() { doLayout(); } function doLayout() { var width = $("#sidebar").css("width"); $("#content").css("left", width); }