Question

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

我有这段代码：

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

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

修改建议更改后，我有fiddle，但代码有效，但在我的实际应用程序中却没有。所以问题出在其他地方，我猜:(

Answer 1

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

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

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

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

Answer 2

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

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

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

outerWidth()考虑了填充+边距
width()考虑填充
innerWidth()不考虑。

Answer 3

$(document).ready(function() {
    doLayout();
}


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

Answer 4

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

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

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

我想如果你在javascript中创建一个DOM元素并且它的宽度在外部CSS中被定义为“100％”，那么这个对象的offsetWidth（和offsetHeight）将无法获得在所有javascript完成运行之前计算。

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

Answer 5

使用：

$(document).ready(function() {
    doLayout();
}

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

如果宽度由图像控制，则无法帮助您，因为文档准备好后可能无法呈现图像。如果这仍然不起作用，我们需要更多的背景。

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

5 个答案: