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...

回答1:

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;
   

   };

回答2:

Please try:

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

Also check the following plugin:

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