Question

我的HTML中有img定义的id元素。在JavaScript中，我有一个设置该元素的图像源的函数。无论我尝试了什么，我都无法使用$('#name').width()获取尺寸。它总是会返回零。

我在这里找到了一个解决方案，通过创建一个新的图像元素并使用onload事件来获取这些值来获取宽度和高度。我想将元素的宽度和高度设置为这些值，以便我可以引用它们。无论我尝试了什么（attr，css，width），我都没有得到任何结果。我无法理解，所以我希望有人可以提供帮助。

HTML来源

    <div id="image">
        <img id="photo">
    </div>

    <div id="debug"></div>

JavaScript＆amp; jQuery Source

$(document).ready(function(){
...
    function choosePhoto() {
    $('#photo').attr({
        src: "photo.gif",
        title: "Photo"
    });

    // determine width and height of new photo
    var img = document.getElementById('photo'),
        new_img = new Image();
    new_img.onload = function() {
        var imgWidth  = this.width,
            imgHeight = this.height;

        // one of my attempts at setting the width
        // value of an element outside this function.
        // 
        // How do I set the width and height values on the element
        // so that I can refer back to them again?
        $('#photo').attr({
            width: imgWidth
        });

        // this prints the correct dimensions
        $('#debug')
            .append("Original dimensions are : " + imgWidth + "x" + imgHeight + " pixels");
    }
    new_img.src = img.src;

    // this prints zero for the width
    $('#debug')
        .append("Image: " + $('#photo').width() + " x " + $('#photo').height() + "<br />");
}
...
});

Answer 1

修改图像源是异步的，因此不会立即返回。

尝试处理load（）

$("#photo").attr("src",new_src).load(function() {
  console.log($(this).width())
});

读取和设置选择器/ img的宽度和高度

1 个答案: