javascript - 使用 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 事件侦听器中，以便在调整窗口大小时传递正确的值。我还必须获得元素的高度，然后在单击时用另一个元素替换，但这是我通过赋予包装元素可见性/隐藏和绝对位置来解决的另一个方面。包含图像的元素不再可见，但将继续调整包含高度值的大小，并且在被其他元素替换时不会干扰。如果将 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);
});

在我看来，没有其他方法可以解决这样的问题，但等待一些确认！