Question

在这里的人们的帮助下，我已经能够使用以下代码获得图像的原始宽度：

var img = new Image();

        img.onload = function () {
            var W2 = this.width;
            alert(W2);
        }

        img.src = document.getElementById('imageViewerImg').src;

现在我有图像的宽度，如果图像宽度超过700px，我需要一个条件语句来修改CSS。

我这样做的代码如下：

$(document).ready(function(){
        var img = new Image();

        img.onload = function () {
            var W2 = this.width;
        }

        img.src = document.getElementById('imageViewerImg').src;

        if($W2 > 700) {
            $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
        }
    });

但这不起作用。我试图在条件语句中添加一个警告框，因此如果图像恰好大于700px，它应该出现并通知。此警报框也不会显示。即使我将警告框放在if语句之外并且只是放在下面，它也不会起作用，如下所示：

$(document).ready(function(){
            var img = new Image();

            img.onload = function () {
                var W2 = this.width;
            }

            img.src = document.getElementById('imageViewerImg').src;

            alert(W2)
        });

我应该在此代码中放置if语句以使其正常工作？

Answer 1

将if逻辑移到图片的onload内，如下所示：

$(document).ready(function(){
    var img = new Image();

    img.onload = function () {
        var W2 = this.width;
        if(W2 > 700) {
            $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
        }
    }

    img.src = document.getElementById('imageViewerImg').src;
});

注意：JavaScript使用嵌套作用域，因此当您在W2内定义image.onload时，它在原来具有if逻辑的位置不可用。

Answer 2

当你使用jQuery时，保持这样的一切。不要混淆常规的Javascript DOM操作。并且您的变量需要在代码中可见的范围内定义。

$(function () {
    var img = new Image();
    var W2 = 0;

    $(img).on("load", function () {
        W2 = $(this).width;
    });

    $(img).attr("src", $("#imageViewerImg").attr("src");

    if (W2 > 700) {
        $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
    }
});

Answer 3

你有一个范围问题：

 $(document).ready(function(){
        var img = new Image();
        var W2;
        img.onload = function () {
            W2 = this.width;
        }

        img.src = document.getElementById('imageViewerImg').src;

        alert(W2);

        if($W2 > 700) {
          $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
        }
    });

您需要定义W2语句可以访问它的if。

或

更好的是，您可以将if语句放在onload事件处理程序中：

$(document).ready(function(){ var img = new Image(); img.onload = function () { var W2 = this.width; if($W2 > 700) { $("#photoHolder").css({"vertical-align":"none","text-align:":"none"}); } } img.src = document.getElementById('imageViewerImg').src; });

Answer 4

由于您使用的是jQuery，因此可以使用width（）函数而无需定义新的Image。例如：

<img src="http://bunkerhill.com/images/bh_commander.jpg" alt="Battle Cry"/>
$(function() {
    var w2=$("img").width();
    alert(w2);
    if (parseInt(w2)>700) {
       //do something
    }
});

jsfiddle

条件语句JQuery

4 个答案: