Find out if HTML height is set by style or by content

Question

I have 2 divs:

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

in my css:

#div1{ height:20px}​

Both divs have 20px height, check demo
How can I find out if the div have it's height due to content or have been set in css or inline style?
This helps me find out the dimensions have been set by the developer or just calculated by the browser.

Answer 1

I found a way to achieve it :)

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

Use this function:

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

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

    return height;   
}

The idea is to temporarily detach all child nodes from the element. An element with no children has a height of 0, unless its height is set via CSS.

Pass your DIV element into that function. If it returns 0, that means that the DIV does not have its height set via CSS.

if ( emptyHeight( yourDiv ) === 0 ) {
    // the DIV does not have any height value set via CSS
} else {
    // the DIV has a CSS height set
}