3

我正在尝试使用 JQuery 获取图像的原始宽度，并在图像宽度超过 700px 时在 CSS 中进行一些调整。

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

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

小提琴

您可以看到一个警告框显示图像的宽度，在本例中为 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 上而不是我自己的 PC 上？

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

4

4 回答 4

2

像这样使用 jQuery 文档就绪函数：

$(document).ready(function(){

});

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

于 2013-07-23T14:49:20.907 回答
1

试试这样：

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 的元素等。

于 2013-07-23T14:57:55.020 回答
0

您的变量$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"});
}
于 2013-07-23T15:05:01.913 回答
0

使用它来确保您的代码将在 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"});
    }
});
于 2013-07-23T14:49:09.483 回答