javascript - 元素宽度在文档就绪时未定义

Question

我试图在 </body> 之前使用以下代码获取元素宽度

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        var diff = $('div.canvas img.photo').get(1).width;
        console.log(diff);
    });
</script> 

但它记录未定义。但是，如果我运行 $('div.canvas img.photo').get(1).width直接在 Chrome/Firebug 控制台中，它返回正确的宽度。该图像未使用 Javascript 加载，因此应在文档就绪触发时就位。我做错了什么？

Answer 1

不，不应该。 document.ready 在所有 HTML 已加载但未加载图像时触发。如果您想等到所有图像都加载完毕，请使用 window.load。

例子:

$(window).load(function(){
    var diff = $('div.canvas img.photo').get(1).width;
    console.log(diff);
});

另外，正如一些人所指出的，您试图两次获取“.width”属性。

如果可能，请在 CSS 中为图像标签设置宽度。这样，您就可以安全地将 document.ready 用于您的代码。使用 window.load 自然会延迟脚本的执行，可能是一秒，也可能是十秒，具体取决于客户端连接的速度和页面上的内容量。如果您正在执行任何样式，这可能会导致不必要的跳跃和抖动。