jquery得到圖片高度方法

jQuery是建立在JavaScript之上的JavaScript函式庫，讓JavaScript寫的程式碼更簡潔，方便使用。在網頁開發過程中，經常需要取得圖片的高度和寬度等資訊。下面我們就來介紹如何透過jQuery取得圖片高度的方法。

1. 透過img元素取得圖片高度

在HTML中，可以使用img元素來嵌入圖片。我們可以使用jQuery選擇器來取得該元素，並取得其高度屬性。程式碼如下：

var height = $('img').height();

這裡的'img'是一個選擇器，用於選擇文件中的圖片元素。 height()方法用來取得元素的高度，傳回一個數字類型的值。由於此方法取得的是元素的高度，不包括邊框和內邊距的高度，因此這個高度值要小於實際圖片的高度。如果需要取得包含邊框和內邊距的高度，可以使用outerHeight()方法。

2. 透過load事件取得圖片高度

另一種取得圖片高度的方法是透過在圖片載入完成後取得其高度。我們可以使用load()方法來綁定圖片載入完成的事件，在事件處理函數中取得圖片的高度。程式碼如下：

$('img').on('load', function() {
  var height = $(this).height();
});

這裡的'on'方法用來綁定load事件。注意，這裡不能使用bind()方法，因為bind()方法只會在圖片已經載入完畢時才能綁定成功，而load事件是在圖片載入完成後觸發的。在事件處理函數中，我們可以使用$(this)來取得目前觸發事件的圖片元素，然後使用height()方法來取得圖片高度。

3. 透過新建立的Image對象取得圖片高度

我們也可以透過建立一個新的Image對象，來取得圖片的高度和寬度等資訊。程式碼如下：

var img = new Image();
img.onload = function() {
  var height = this.height;
}
img.src = 'image.png';

在這裡，我們首先建立了一個新的Image物件img，並設定其onload事件處理函數，用於在圖片載入完成後取得其高度。然後，我們設定img的src屬性，以開始載入圖片。

要注意的是，這種方法是透過JavaScript原生的Image物件來取得圖片的高度，而不是透過jQuery選擇器來取得圖片元素。因此，如果要使用jQuery的其他方法來操作這個Image對象，需要將其轉換為jQuery對象，例如：

$(img).appendTo('body');

上述程式碼將創建的Image對象img轉換為jQuery對象，然後將其添加到文檔中。

綜上所述，透過上述方法，我們可以透過jQuery來取得圖片的高度。當然，這些方法同樣也可以用來取得圖片的寬度和其他屬性。在實際使用過程中，我們需要根據具體的需求選擇合適的方法。

以上是jquery得到圖片高度方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！