Question

我有2个div：

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

在我的css中：

#div1{ height:20px}

两个div的高度均为20px，请检查demo
如何判断div是否由于内容而具有高度，或者是以css还是内联样式设置？这有助于我找出由开发人员设置的维度或仅由浏览器计算的维度。

Answer 1

我找到了实现它的方法：）

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;
}

DEMO

Answer 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
}

Answer 3

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

Answer 4

<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>

找出HTML高度是按样式还是按内容设置的

4 个答案: