javascript - HTML の高さがスタイルによって設定されているか、コンテンツによって設定されているかを調べる

Question

私は2つの部門を持っています:

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

私のCSSで：

#div1{ height:20px}​

両方の div の高さは 20pxです。デモを確認してください これは、寸法が開発者によって設定されたものか、ブラウザによって計算されただけのものかを知るのに役立ちます。

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

</ p>

<ahref="http://jsfiddle.net/ayUsw/10/">デモ

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

アイデアは、要素からすべての子ノードを一時的に切り離すことです。CSS で高さが設定されていない限り0、子を持たない要素の高さは です。

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
}