使用 jQuery 调整图像高度

Get resized image height with jQuery

本文关键字：高度 图像 调整 jQuery 使用      更新时间：2023-09-26

>我有一张图像，我需要获取高度。我目前正在使用 jQuery 来获取高度：

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

我面临的问题是，我在 css 中将图像大小调整为 88%，因此我没有给我新的高度，而是在调整图像大小之前获得高度。有没有办法让我获得新的高度？

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

读取属性（带 .attr() ）将始终从 DOM 返回原始内联高度属性。

改用 .height（） 代替（如果需要，也可以使用 .outerHeight（）。

height = jQuery("#product-img-box img").height();
<小时 />

.height（）

返回：整数

说明：获取匹配元素集中第一个元素的当前计算高度。

http://api.jquery.com/height/获取匹配元素集中第一个元素的当前计算高度，或设置每个匹配元素的高度。

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

代码可能还需要包装到 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);
});

在我看来，没有其他方法可以解决这样的事情，而是等待一些确认！

相关文章：