.height（）返回100无论元素的高度

Question

当我使用.height()方法获取元素的高度时，无论其实际高度如何，都会返回 100 。

CSS代码

.album_content .album_right .album_thum span { height: 100%; }

Jquery CODE

function center_img(){
    var span_ele = $('.album_content .album_right .album_thum span');
    var img_ele = span_ele.find('img');
    alert(span_ele.height()+','+img_ele.height());
    if(span_ele.height() > img_ele.height()){
        img_ele.css('margin-top',(span_ele.height()-img_ele.height())/2+'px');
    }
}

看到这个

我该如何解决这个问题。 感谢

解决方案

当我使用span_ele.length时，它返回21

所以问题出在选择器上，现在效果很好！

Answer 1

在你的css中这样做：

.album_content .album_right .album_thum span{
   height: 100%;
   display:block; /* <----add this */
}

因为span是内联级元素checkout here @ MDN.

Demo without display:block

Demo with display:block

Answer 2

很可能有多个图像标记与var span_ele = $('.album_content .album_right .album_thum span');选择器匹配，其高度为100。

.height()获取：

  

获取匹配元素集中第一个元素的当前计算高度，或设置每个匹配元素的高度。

JQuery API Doc

Answer 3

这只是猜测，但您的选择器$('.album_content .album_right .album_thum span')可以匹配DOM中的多个元素。当您使用.height()之类的方法时，它只会为您提供第一个匹配元素的高度。你知道你的jQuery选择器给你你认为它的元素的高度吗？

尝试做：

alert($('.album_content .album_right .album_thum span').length);

这会告诉你有多少场比赛。如果您在查询中更具体，那也会有所帮助。