How to Detect If Element Has 'Auto' Height

How to detect if element has 'auto' height

Update:

Based on other answers and lot of online research I came up with a mix of everything in a single function. Check out the jsfiddle here:
https://jsfiddle.net/oriadam/d01ap7r6/3/

// input a jQuery element
// return true for elements with auto height (90-100% is considered auto as well)
// return false for elements with fixed height
function is_height_auto($e) {
    var e = $e[0],
        // check fixed style:
        chk = function(value) {
            return /\d/.test(value) && !/^(100|9\d)\%/.test(value);
        };

    // start from the first, easiest, inline styles
    if (chk(e.style.height)) {
        // console.log('fixed for having style', e.style.height)
        return false;
    }

    // start from the first, easiest, inline styles
    var overflow = getComputedStyle(e)['overflow'];
    if (overflow == 'scroll' || overflow == 'auto' || (e.tagName == 'BODY' && overflow == 'visible')) {
        // console.log('auto for having overflow or is body', getComputedStyle(e)['overflow'], e.tagName);
        return true;
    }

    // deprecated chrome way - check each rule that applies to the element
    if (typeof getMatchedCSSRules == 'function') {
        var i, MatchedCSSRules = getMatchedCSSRules(e) || [];
        for (i = MatchedCSSRules.length; i; i--) {
            if (MatchedCSSRules[i - 1].style.height) {
                // console.log('found height at MatchedCSSRules[' + (i - 1) + ']: ', MatchedCSSRules[i - 1], ' All matches: ', MatchedCSSRules)
                return !chk(MatchedCSSRules[i - 1].style.height);
            }
        }
    }

    // append something, see if height was changed, remove the something
    var originalHeight = $e.height(),
        $ghost = jQuery('<b style="display:block;height:1px;width:1px;padding:0;margin:0;">').appendTo($e),
        newHeight = $e.height();
    $ghost.remove(); // cleanup
    // console.log('Using a ghost got ',newHeight > originalHeight,' originalHeight=' + originalHeight + ' newHeight=' + newHeight) 
    return newHeight > originalHeight;
} //is_height_auto()

** Ghost element method explained (Previous answer):**

Greg Pettit had a pretty good answer in his blog, here is the main idea:

What’s unique about having auto height? Well, the fact that it allows height to change dynamically, of course!

1. Clone the element
2. Put it in visibility:hidden and position:absolute
3. Remove it's content
4. See if height changed (it should be around 0
   now).

5. Cleanup

   var isAutoHeight = function(element) {
   // make a staging area for all our work.
   $('body').append('');

   // assume false by default
   var autoHeight = false;
   
   // clone the div and move it; get its height
   var clone = element.clone();
   clone.appendTo('#stage');
   var initialHeight = clone.height();
   
   // destroy all the content and compare height
   clone.html('');
   var currentHeight = clone.height();
   if (currentHeight < initialHeight) {
       autoHeight = true;
   }
   
   // get that clone and its smelly duplicate ID out of the DOM!
   clone.remove();
   // do the same for the stage
   $('#stage').remove();
   
   return autoHeight;
   

   };

Get element height when style = auto or 100%?

You could do it with pure javascript like this :

Javascript

var divHeight;
var obj = document.getElementById('id_element');

if(obj.offsetHeight) {
    divHeight=obj.offsetHeight;

} else if(obj.style.pixelHeight) {
    divHeight=obj.style.pixelHeight;

}

With jQuery library it's easier :

JQuery

var height = $('#element').height();

Edit

Now with many elements within a container :

Html

<div id="divId">
    <img class="node" src="path/to/pic" style="z-index:10; opacity:0;"/>
    <img class="node" src="path/to/pic" style="z-index:9; opacity:0;"/>
    <img class="node" src="path/to/pic" style="z-index:8; opacity:1;"/> 
    <img class="node" src="path/to/pic" style="z-index:7; opacity:1;"/>
    <img class="node" src="path/to/pic" style="z-index:6; opacity:1;"/>
</div>

I changed your opacity to visibility for compatibility purposes. Don't use display:none; or the height parsing will fail ;).

JQuery

$("#divId img").each(function(index, picture) {
   var height = $(picture).height();
   //Do everything you want with the height from the image now
});

See fiddle to see it working.

Get actual height of object whose set to auto

In vanilla JavaScript:

element.offsetHeight;

To get correct value, make sure your image is already loaded. For this, either use the load event of window, or preload your image via JS. Do not use the DOMContentLoaded event of document or ready in jQuery.

Can you detect when a dom node's style is set to 'auto'?

Yes there is a way, but it's not a funny one. What you have to do is:

1. Loop through all styletags and linked stylesheets.

2. Then get the selectorText for all cssRules in all style tags

   styletag.sheet.cssRules.selectorText
   

   or for IE < 9

   styletag.styleSheet.cssRules.selectorText
   

3. Get all of your elements parents id, class and tagName to find out what possible ways for the tag to get the attribute.

4. Find all possible combinations that point towards your element in your
   list of cssRules
5. check those cssRules at cssRules.style.width if it is auto.

or do it some reverse way and find all cssRules with style.width == 'auto'; either way its not something easy to get without a lot of code

---

Related Topics