使用 jQuery 獲取調整后的圖像高度

Question

我有一張需要獲取高度的圖像。 我目前正在使用 jQuery 來獲取高度：

height = jQuery("#product-img-box img").attr("height");

我面臨的問題是，我在 css 中將圖像大小調整為 88%，所以我沒有給我新的高度，而是在調整圖像大小之前獲得高度。 有沒有辦法讓我獲得新的高度？

Answer 1

讀取屬性（使用.attr() ）將始終從 DOM 返回原始行內高度屬性。

使用.height()代替（或.outerHeight()如果需要）。

height = jQuery("#product-img-box img").height();

---

。高度（）

返回：整數

描述：獲取匹配元素集中第一個元素的當前計算高度。

Answer 2

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

Answer 3

http://api.jquery.com/height/獲取匹配元素集中第一個元素的當前計算高度或設置每個匹配元素的高度。

height = jQuery("#product-img-box img").height();

Answer 4

可能還需要將代碼包裝到 window.resize 事件偵聽器中，以便在調整窗口大小時傳遞正確的值。 我還必須獲得元素的高度，在 onclick 時替換為另一個，但這是我通過為包裝元素提供可見性/隱藏和絕對位置來解決的另一個方面。 包含圖像的元素不再可見，但將繼續調整包含高度值的大小，並且在被其他元素替換時不會干擾。 如果將 css display/none 應用於元素，則該元素的高度值將為 0。重置為可見性/可見性並且可以定位/繼承或當其他元素（匹配相同尺寸）從 dom 中移除時元素之前的位置，並且 img 需要重新出現在適當的位置（具有正確的值）。

jQuery(document).ready(function(){

var imgc = document.getElementById("w3all-flightaw-img");
var imgcheight = imgc.clientHeight;
var imgcwidth = imgc.clientWidth;
... may apply css inline to elements that need to have the same width/height, when dom ready

function reportELEMSize() {
imgcheight = document.getElementById("flightaw-img").clientHeight;
imgcwidth = document.getElementById("flightaw-img").clientWidth;
... same as above: may apply css inline to elements, when window resize
}

window.onresize = reportELEMSize; 
// OR (better, so listener not nullified by something else) use:
// window.addEventListener('resize', reportELEMSize);
});

在我看來，沒有其他方法可以解決這樣的問題，只能等待確認！