Question

我试图使用JQuery获取图像的原始宽度，并在图像宽度大于700px的条件下对CSS进行一些调整。

我使用此代码来获取图像的宽度：

var img = new Image();
img.src = $('#imageViewerImg').attr('src');
img.onload = function () {
    var W2 = this.width;
    alert(''+ W2);
}

Fiddle

您可以看到一个警告框显示图像的宽度，在本例中为1024.当我复制粘贴此代码时，它不能在我的网站上运行。它只是不会显示警告框。我正确地包含了JQuery，因为其他JQuery代码可以正常运行，它只是这个简单的JQuery，并没有做它应该做的事情。

最后，这是我尝试创建的功能所需的代码：

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

为什么警报框会出现在JSfiddle上，而不是出现在我自己的电脑上？

同样使用document.ready功能，它仍然无法正常工作。 JQuery根本没有被执行。

Answer 1

使用jQuery文档就绪函数，如下所示：

$(document).ready(function(){

});

这是一个常见的“错误”，代码是从jsFiddles复制的。

Answer 2

试试这样：

var img = new Image();
img.onload = function () {
    var W2 = this.width;
    if(W2 > 700) {
        var photoHolder = document.getElementById("photoHolder");
        photoHolder.style.verticalAlign = 'none';
        photoHolder.style.textAlign = 'none';
    }
}
img.src = document.getElementById('imageViewerImg').src;

此外，打开控制台并检查错误，检查您是否只有一个具有该ID的元素等。

Answer 3

使用它来确保在加载html后执行代码。

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

    img.src = $('#imageViewerImg').attr('src');

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

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

Answer 4

您的变量$imgWidth在您的代码中未声明，而imgWidth的范围不在您的函数范围内。

尝试：

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

在JSFiddle上运行的简单JQuery脚本，而不是在我的站点上

4 个答案: