how to tell if a div is height constrained?

Question

I would like to know using jquery if a div is height constrained or not.

For example this div is constrained to 100px, whatever the size of the content the div will have 100px height:

    <div style="height: 100px;">
         bla bla
    </div>

and this one is not constrained and will take the height of it's content :

    <div>
          bla bla
    </div>

in other words I want to know if the height was set (and what if so) either by setting the style attribute or with a separate css style. Thanks

Solution for FF3.6 FF5 IE8 Chrome12 and Opera11 :

function css(a){
  var sheets = document.styleSheets;
  var o={};
  var name;
  var i=0;
  while (i<sheets.length) {
    var rules = sheets[i].rules || sheets[i].cssRules;
    var r=0;
    while(r<rules.length) {
          if(typeof(rules[r].style)!="undefined" &&
             !rules[r].selectorText.match(":before") &&   // fix for FF3.6
             !rules[r].selectorText.match(":after") &&
             !rules[r].selectorText.match(":link") &&
             !rules[r].selectorText.match(":hover") &&
             !rules[r].selectorText.match(":active") &&
             !rules[r].selectorText.match(":visited") &&
             !rules[r].selectorText.match(":first-letter") &&
             !rules[r].selectorText.match(":-moz-focus-inner") &&
              a.is(rules[r].selectorText)) {
              o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
          }
        r++;  
      }
    i++;
  }
  return o;
}

function css2json(css){
  var s = {};
  if(!css) return s;

  var isMSIE = /*@cc_on!@*/0;

  if (isMSIE)
      {
        if(typeof(css)=="object")
          {
            for(var i in css) {
              if(i.toLowerCase) 
                s[i.toLowerCase()] = css[i];
            }
          }
        else if(typeof css == "string")
          {
            css = css.split("; ");          
            for (var i in css) {
              var l = css[i].split(": ");
              s[l[0].toLowerCase()] = (l[1]);
            };
          }
      }
    else
      {
        if(css instanceof CSSStyleDeclaration)
          {
            for(var i in css) {
              if((css[i]).toLowerCase)
                s[(css[i]).toLowerCase()] = (css[css[i]]);
            }
          }
        else if(typeof css == "string")
          {
            css = css.split("; ");          
            for (var i in css) {
              var l = css[i].split(": ");
              s[l[0].toLowerCase()] = (l[1]);
            };
          }              
      }
  return s;
}



...           
alert(css($('some selector')).height);

score 3 · Accepted Answer · edited May 23 '17 at 11:47

3

Using the functions provided in this answer, you can access the height of the element like this:

css($('div')).height

Those functions account for both inline and inherited styles, which I believe is what you want. In the event that the height has not been explicitly specified, the height property of the returned object will be undefined.

Demo

edited May 23 '17 at 11:47

Community

1
1

answered Jul 28 '11 at 11:29

Town

14,706
3
48
72

Not sure what the problem is, but that didn't work in my browser (Firefox 3.6). I get: Syntax error, unrecognized expression: before – Ariel Jul 28 '11 at 11:43
@Ariel: Me neither mate. `before` isn't mentioned in the code, maybe it's a jQuery thing... – Town Jul 28 '11 at 11:55
@Pascal COURTOIS: so it doesn't. It still discovers the properties but the object that's returned from `css()` in IE is malformed. Should be fixable... – Town Jul 28 '11 at 12:34
@Town 'before' is the css selector ':before' . jQuery has a bug with :before, :after and a few others when run on FF 3.6 – Pascal COURTOIS Jul 28 '11 at 21:35

score 0 · Answer 2 · answered Jul 28 '11 at 11:40

As far as I can tell there's no direct way to know if a height has been set on an element or not.

However, searching around I came across an idea that I think will work well.

It basically involves cloning the element you want to know about, adding a class to the clone that has a height set to a value that is unlikely to ever be used, and then testing against that.

Here's a method I just put together to test this:

function IsHeightSet(id)
{
    var clone = $(id).clone();
    clone.addClass('magicHeight');

    return (clone.height() == 1069)? false : true;
}

and the CSS class for magicHeight:

.magicHeight
{
    height: 1069px;
}

We can then use this to test whether a given element had a height specified or not.

Here's a working example of this code: http://jsfiddle.net/mnpey/1/

Your answer is interesting since it tells if a div is constrained or not, but it doesn't tell to what it is constrained. But I keep the trick in mind. Thanks. — Pascal COURTOIS, Jul 28 '11 at 11:52
I get true for the first one and false for the second. Interesting. What Browser? — Jamie Dixon, Jul 28 '11 at 15:46

how to tell if a div is height constrained?

2 Answers2

Linked