在JSFiddle上工作的簡單JQuery腳本，不在我的網站上

我試圖用JQuery獲取圖像的原始寬度，並在圖像比700px寬的情況下在CSS中進行一些調整。在JSFiddle上工作的簡單JQuery腳本，不在我的網站上

我用這個代碼來獲得圖像的寬度：

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沒有被執行。

來源

2013-07-23 user2611052

你記得文檔準備功能，將的jsfiddle添加自動的爲你。 – adeneo

你使用什麼瀏覽器？ – ApolloSoftware

'$ imgWidth'在您的代碼中未聲明。在這種情況下'imgWidth'沒有用處。 –

使用它可以確保您的代碼將在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-23 14:49:09 Okazari

使用jQuery的文檔準備功能是這樣的：

$(document).ready(function(){ 

});

這是一個共同的「錯誤」與從jsFiddles複製的代碼。

來源

2013-07-23 14:49:20

試試這樣說：

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-23 14:57:55 adeneo

這工作非常感謝！ :) – user2611052

@ user2611052 - 請注意，這不使用jQuery，它在加載函數後設置源。 – adeneo

你的變量$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-23 15:05:01

在JSFiddle上工作的簡單JQuery腳本，不在我的網站上

回答

相關問題