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

html, javascript, jquery, jquery-ui

Solution

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

Problem

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.

Original source

Related problems