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.

I'm curious, why would you need to know programatically where the attribute was being set from? — Brian Hoover, May 11 '12 at 13:36
If the height have been set with css or an inline style, then my plugin don't have the right to override it, otherwise I can override it — ilyes kooli, May 11 '12 at 13:37

ilyes kooli · Accepted Answer · 2012-05-11T14:56:57.500

11

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

edited May 11 '12 at 14:56

answered May 11 '12 at 13:52

ilyes kooli

11,959
14
50
79

+1 nice trick. but what if I had an empty div? `.html()` won't return empty. – Joseph May 11 '12 at 13:57
@skafandri i meant an empty div inside the element – Joseph May 11 '12 at 13:58
DOM-serialization is not a good solution. During the DOM -> string -> DOM transformation process, certain data will be lost. (Just like with digital -> analog -> digital.) – Šime Vidas May 11 '12 at 14:47
Can you develop please? which kind of data may be lost? – ilyes kooli May 11 '12 at 14:50
1

@skafandri Read [this thread](http://stackoverflow.com/questions/7392930/why-should-y-innerhtml-x-innerhtml-be-avoided), **especially** the accepted answer. – Šime Vidas May 11 '12 at 14:52
@skafandri That's the correct way to do it. I have also provided my own answer, check it out. – Šime Vidas May 11 '12 at 15:13

Šime Vidas · Answer 2 · 2012-05-11T15:20:36.380

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
}

score 1 · Answer 3 · answered May 11 '12 at 13:39

1

You can use jQuery to search for the CSS height value and compare that?

answered May 11 '12 at 13:39

Robert

1,899
1
17
24

sshow · Answer 4 · 2017-01-28T14:46:15.437

1

<div id="div-styled" style="height: 20px"></div>
<div id="div-unstyled"></div>

Check for inline CSS height property with plain JavaScript

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

Update

jQuery returns style rules from external style sheets as well with .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>

edited Jan 28 '17 at 14:46

answered May 11 '12 at 13:39

sshow

8,820
4
51
82

Tried it in my case (external css sheet) returns '' in both cases.. http://jsfiddle.net/ayUsw/3/ – ilyes kooli May 11 '12 at 13:43
doesn't cover external css or width/height attributes – Georgii Ivankin Jan 26 '17 at 20:30
@GeorgiiIvankin Correct. Only checks for *inline CSS height* – sshow Jan 28 '17 at 14:29

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

4 Answers4

Linked