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

2024-05-06 15:52:29

字體：大中小

來源：轉載

供稿：網友

使用jquery獲取網頁中圖片的高度其實很簡單，目前有兩種不錯的方法可以實現，下面為大家詳細介紹下，有所疑惑的你可以參考下

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

復制代碼代碼如下:

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

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

方法一

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

方法二

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

復制代碼代碼如下:

$(function(){});
window.onload=function(){}

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

有沒有感受出區別來呢，一個是在資源沒有加載的時候調用的，一個是在資源加載結束，頁面已經渲染之后調用的，所以當我們在$(function(){})調用$('img').width()的時候，由于圖片還沒有加載，所以這時候<img>標簽的高度就是0，所以返回值就是0。但是當你用window.onload=function(){}調用的時候，圖片已經加載出來了，所以這時候就能得到圖片的高度。

所以記得，$(function(){})是在DOM渲染結束，資源還沒有加載的時候執行的，如果你想獲取到一些資源的信息，這個時候是沒有辦法的哦

上一篇：js中的referrer返回上一頁使用介紹

下一篇：js將當前時間格式轉換成時間搓(自寫)