0

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

var img = new Image();

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

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

现在我有了图像的宽度，如果图像宽于 700 像素，我需要一个条件语句来修改 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"});
        }
    });

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

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

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

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

            alert(W2)
        });

我应该把我的 if 语句放在这个代码中的什么地方才能让它工作？

4

4 回答 4

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逻辑的地方不可用。

于 2013-07-23T15:20:15.557 回答
1

当您使用 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"});
    }
});
于 2013-07-23T15:20:56.840 回答
0

你有一个范围问题：

 $(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;
});
于 2013-07-23T15:17:21.997 回答
0

由于您使用的是 jQuery，因此您可以使用 width() 函数而无需定义新图像。例如：

<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

于 2013-07-23T15:26:51.603 回答