使用jquery取得網頁中圖片高度的兩種方法_jquery

使用jquery取得網頁中圖片的高度其實很簡單，有兩種常用的方法都可以打到我們的目的

複製程式碼 程式碼如下:

$("img").whith();（傳回純數字）
$("img").css("width");(傳回字串：數字"px"）

但有時候會遇到回傳0的情況，上面方法回傳值竟然是0或0px，很讓人詬異

方法一

在很早之前，我使用的解決方法，這也是我的師傅告訴我的解決方法：在你需要獲取到的圖片的標籤上加上width屬性，或是在css中寫出來圖片的告訴，這樣就可以了，所以每次我要去獲取一個圖片的高度的時候，都需要去先測量一下圖片的高度，然後寫到網頁中，這樣才可以，是不是很笨拙啊，下面我們就來看第二個方法。

方法二

最近在看Learning jQuery英文版原著，正因為一邊翻譯，一邊閱讀，所以每一頁都看的很仔細，於是仔細終於閱讀體會了以下兩種常用的jquery事件載入的方法

複製程式碼 程式碼如下:

程式碼如下:

$(function(){});

window.onload=function(){}


第一個呢，是在DOM結構渲染完成以後調用的，這時候網頁中有些資源還沒有加載，例如圖片等資源，但是DOM結構已經渲染成功了
第二個呢，是在網頁DOM結構渲染完成，而且資源已經加載成功以後調用的。

有沒有感受出區別來呢，一個是在資源沒有載入的時候調用的，一個是在資源加載結束，頁面已經渲染之後調用的，所以當我們在$(function(){} )呼叫$('img').width()的時候，由於圖片還沒有加載，所以這時候標籤的高度就是0，所以返回值就是0。但是當你用window.onload=function(){}呼叫的時候，圖片已經載入出來了，所以這時候就能得到圖片的高度。 所以記得，$(function(){})是在DOM渲染結束，資源還沒有加載的時候執行的，如果你想獲取到一些資源的信息，這個時候是沒有辦法的哦