jQuery attr不起作用

Question

我在容器中有圖像，我已經在CSS中爲這個圖像設置了寬度和高度屬性。但是我需要添加加載圖片，並且它比容器中顯示的實際圖片更小，所以我需要在加載時更改圖片的大小。但是，當我設置寬度和高度屬性，圖像顯示在CSS中設置的大小。

$(img).attr("src", "loading.gif"); 
$(img).show(); 
$(img).attr("width", "100px"); 
$(img).attr("height", "100px"); 

Answer 1

你混淆屬性與CSS：

$(img) 
    .attr("src", "loading.gif") 
    .css({width:100,height:100}) 
    .show(); 

當然這個假設img實際上代表圖像：

var img = $("img.myImage"); 

如果沒有圖像，您需要創建一個，並將其附加到DOM：

$("<img>") 
    .attr("src", "loading.gif") 
    .css({width:100,height:100}) 
    .appendTo("body"); 

Answer 2

不要使用attr("width")等覆蓋CSS，使用css()：

$(img).attr('src', 'loading.gif').show().css({ width: 100, height: 100 }); 

Answer 3

您已檢查源將是什麼你做的時候是怎樣的？

<img src="loading.gif" width="100px" height="100px" /> 

將不起作用。

<img src="loading.gif" width="100" height="100" /> 

會。所以刪除px單位=）

編輯：正如其他響應者指出，最好使用CSS。但是，他們倆都忘記了在css裏你做的需要這個單位。

$(img).css({width: "100px"; height: "100px";}); 

Answer 4

也許嘗試調整樣式屬性，而不是根據this question？

Answer 5

width和height屬性的唯一單位是百分比（…%）。 Values without that unit are always pixels.那麼試試這個：

$(img).attr("width", "100"); 
$(img).attr("height", "100");