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

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中的imagetags上设置宽度.这样,您就可以安全地将document.ready用于您的代码.使用window.load自然会延迟脚本的执行,可能是一秒钟,可能是十秒,具体取决于客户端连接的速度以及页面上的内容量.如果您正在执行任何样式,这可能会导致不必要的跳跃和抖动.