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

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

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

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

小提琴

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

最后，这是我正在尝试创建的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"}); } 

为什么警报框出现在JSfiddle而不是我自己的PC上？

---

还有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"}); }