Question

这应该很容易，但事实并非如此。我只需要图像的高度：

<div id="map">
    <img src="myimage.jpg">
</div>

$("#map img").height(); // returns 0

Answer 1

使用.clientHeight（纯JavaScript）：

https://jsfiddle.net/ryanpcmcquen/v6yz8t3u/

＆＃13;

console.log(document.querySelector('img').clientHeight);

＆＃13;

<img src="//makelin.us/100/100" />

＆＃13;

在此处阅读：https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

请注意，这会为您提供图片在页面上显示的高度，可能会受到CSS的影响。

注意：要获得图像的实际高度，请使用.naturalHeight 这里有好文章： https://davidwalsh.name/get-image-dimensions

要确保在图像加载后运行，请执行以下操作：

window.addEventListener('load', function () {
  console.log(document.querySelector('img').clientHeight);
});

Answer 2

问题是尚未计算高度或宽度，请使用.on( "load", handler )

收听图像加载

$("#map img").on("load", function(){
  var height = $(this).height();
  $('#output').html('height=' + height);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="map">
    <img src="http://placehold.it/400x40">
</div>
<div id="output"></div>

Answer 3

您可以参考以下示例获取图像高度 -

<div id="map">
    <img id="img_id" src="http://www.clickerzoneuk.co.uk/cz/wp-content/uploads/2010/10/PuppySmall.jpg" >
</div>

在js文件中编写以下代码

var height = document.getElementById("img_id").clientHeight;

alert(height);

使用以下链接检查示例 -

http://jsfiddle.net/v60mut3L/1/

Answer 4

这对我有用：

$(window).load(function () {

    var artLists = [];
    $("ul.articles").each(function (index) {
        var imageHts = [];
        $("li img", $(this)).each(function () {
            imageHts.push($(this)[0].height);
        })
        artLists.push(imageHts);
    })

});

获取图像的高度

4 个答案: