How to detect if element has 'auto' height

Both window.getComputedStyle(element).height and element.clientHeight are returning the current height of the element in pixels, regardless of the value set in the CSS.

Is there any way to find out if the height was set to auto, or other units than pixels ?

One solution that @pvnarula suggests through the page he linked is to temporarily change the contents of the element, then compare heights. A little bit hacky...

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!

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

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 &lt; initialHeight) {
    autoHeight = true;
}

// get that clone and its smelly duplicate ID out of the DOM!
clone.remove();
// do the same for the stage
$(&#039;#stage&#039;).remove();

return autoHeight;

};

pvnarula

Please try:

document.getElementById("ele_id").style.height

Also check the following plugin:

http://gregpettit.ca/2012/jquery-check-if-element-has-auto-widthheight/

来源：https://stackoverflow.com/questions/17044379/how-to-detect-if-element-has-auto-height

标签

javascript

css

height