19

我有 2 个 div：

<div id="div1"></div>
<div id="div2">div2</div>​

在我的 CSS 中：

#div1{ height:20px}​

两个 div 的高度均为 20px，请查看演示
如何确定 div 是否因内容而具有高度，或者是否已设置为 css 或内联样式？
这有助于我找出开发人员设置的尺寸或浏览器刚刚计算的尺寸。

4

4 回答 4

11

我找到了实现它的方法:)

function getRealHeight(element){
    var height=0;
    if (element.children().length>0){
        var temp = $('<div></div>');
        temp.append(element.children());
        height = element.height();
        element.append(temp.children());
    } else {
        var html=element.html();
        element.html('');
        height = element.height();
        element.html(html);
    }
    return height;
}

​</p>

​<a href="http://jsfiddle.net/ayUsw/10/">演示

于 2012-05-11T13:52:26.063 回答
2

使用这个功能：

function emptyHeight ( elem ) {
    var $temp = $( '<div />' );
    var $elem = $( elem );
    var height;

    $temp.append( $elem.contents() );
    height = $elem.height();
    $elem.append( $temp.contents() );

    return height;   
}

这个想法是暂时从元素中分离所有子节点。没有子元素的元素的高度为0，除非它的高度是通过 CSS 设置的。

将您的 DIV 元素传递给该函数。如果返回0，则表示 DIV 没有通过CSS 设置其高度。

if ( emptyHeight( yourDiv ) === 0 ) {
    // the DIV does not have any height value set via CSS
} else {
    // the DIV has a CSS height set
}
于 2012-05-11T15:10:38.793 回答
1

您可以使用 jQuery 搜索 CSS 高度值并进行比较吗？

于 2012-05-11T13:39:11.967 回答
1 
<div id="div-styled" style="height: 20px"></div>
<div id="div-unstyled"></div>

使用纯 JavaScript检查内联CSS属性height

document.getElementById('div-styled').style.height // "20px"
document.getElementById('div-unstyled').style.height.length // 0

更新

jQuery 也从外部样式表返回样式规则.css()

var $el = $('#container');
$el.html( $el.css('height') );
#container {
  height: 42px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="container"></div>

于 2012-05-11T13:39:51.843 回答