Question

假设图像的原始高度为200px或低于100px。然后我设置图像的'max-height：100px'。我如何获得其显示的高度。我试过$（'img'）。height（）。但它只是给我一个0值。

Answer 1

使用简单的JavaScript：

var img = document.getElementById('imageid'); // use the id of your image
var height = img.clientHeight;

Answer 2

你需要$（'img'）。innerHeight（） - 获取匹配元素集中第一个元素的当前计算高度，包括填充但不是边框。 http://api.jquery.com/innerHeight/

Answer 3

$(document).ready(function() {
$("img").load(function() {
    alert($(this).height()); // for height
    alert($(this).width());  // for width
});
});

Answer 4

使用window.getComputedStyle（Firefox，Opera，Safari）：

示例：

<img style="height:100px;max-height:100px;" src="img.gif" id="test">

var img = document.getElementById('test');
var height = window.getComputedStyle(img).height;
console.log(height)

将输出100px

对于IE，您可以使用

var height = img.currentStyle.height;

Answer 5

确保你有jQuery初始化ABOVE这个脚本，因为在这种情况下你似乎试图通过“$”命令使用jQuery。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

将上述代码放在文档的头部。

在身体中，但图像

<body>
    <img src="img.jpg" id="new-image" />
</body>

以上是HTML，图片的ID为“new-image”

可以通过在ID

之前添加＃来使用jQuery选择ID

e.g。 “＃新图像”

$(document).ready(function(){

    // Retrieves computed image height and stores to variable "imgHeight"
    var imgHeight = $('#new-image').height();

    // Shows current computed/displayed height in development console
    console.log(imgHeight);

    // If you don't know how to access the development console
    // You can also use alert (but you should learn to use the console!)
    alert(imgHeight);
}

确保将上述代码包装在脚本标记中。

如何在javascript中获取图像的高度

5 个答案: