javascript - 文档准备好时未定义元素宽度

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

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

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

最佳答案

不，不应该。 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 自然会延迟脚本的执行，可能是 1 秒，也可能是 10 秒，具体取决于客户端连接的速度和页面上的内容量。如果您执行任何造型，这可能会导致不必要的跳跃和抖动。

关于javascript - 文档准备好时未定义元素宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9077960/