爲什麼我無法使用此功能更改圖像的寬度？

我試圖改變圖像的寬度爲200px（固定大小），只有圖像寬度大於200px，否則我想離開其原始寬度。爲什麼我無法使用此功能更改圖像的寬度？

現在下面的代碼工作：

<img src="../images/browse-files.png" style="width:200px" onload="var img = new Image(); img.src = this.src; if(img.width <= 680){ var imgW= '680' + 'px' ; this.style.width =imgW;} "/>

但是，下面的代碼不會：

<script type="text/javascript"> 
resize(){ 
var img = new Image(); 
img.src = this.src; 
    if(img.width <= 680){ 
     var imgW= '680' + 'px' ; 
     this.style.width = imgW; 
    } 
return this.style.width;        
} 
</script> 

<img src="../images/browse-files.png" style="width:200px" onload="return resize() "/>

我想知道我在做什麼毛病的最後一個方法。我更喜歡最後的方法，因爲我想在一個.js頁面中包含所有的JavaScript函數。

非常感謝。

來源

2012-08-25 printfmyname

我錯誤的最後額外標記在底部。我刪除它。 – printfmyname

您不能將onload事件放到像這樣的圖像元素上，它必須繼續執行Image的實例。查看this（或下面的參考代碼）以獲得良好開端。我首先創建了一個Image的實例，以便我可以檢測它何時加載。然後，onload的圖像，檢查並查看大小是否大於200.如果是，獲取原始圖像元素,而不是Image的實例，並調整它的大小。

var image = document.getElementById("image"); 

var img = new Image(); 
    img.src = image.src; 

img.onload = function(){ 
    if (img.width > 200) { 
     image.style.width = "200px"; 
    } 
};

來源

2012-08-25 17:15:06 jeremy

如果你使用'parseInt（）'不要忘記基數：['parseInt（variable，radix）']（https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseInt）來指定基礎並最小化奇怪的可能性。 –

@DavidThomas你是對的，但我沒有意識到'parseInt（）'仍然在那裏。我之前只是在玩一些東西。沒有'parseInt（）'更新。 – jeremy

@Nile非常感謝。它工作完美。我會爲你投票，但我的代表是12，我需要15投票。 – printfmyname

您沒有正確聲明功能。

function resize(){ 
    var img = new Image(); 
    img.src = this.src; 
    if(img.width <= 680){ 
    ... 
    } 
}

來源

2012-08-25 17:21:20 Rell

非常感謝@Rob，感謝你們。 – printfmyname

爲什麼我無法使用此功能更改圖像的寬度？

回答

相關問題