Jak wykryć, czy element ma wysokość "automatyczną"

Question

Zarówno window.getComputedStyle(element).height, jak i element.clientHeight zwracają bieżącą wysokość elementu w pikselach, niezależnie od wartości ustawionej w CSS.

Czy istnieje sposób sprawdzenia, czy wysokość została ustawiona na auto, czy inne jednostki niż piksele?

---

Jednym z rozwiązań, które @pvnarula sugeruje pośrednictwem strony on powiązany jest tymczasowo change the contents of the element, then compare heights. Trochę hacky ...

Answer 1

Aktualizacja:

podstawie innych odpowiedzi i dużo badań online wymyśliłem połączenie wszystkiego w jednej funkcji. Sprawdź jsfiddle tutaj: 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() 

** metoda elementów Duch wyjaśnił (poprzednia odpowiedź): **

Greg Pettit miał całkiem dobrą odpowiedź in his blog, tutaj jest główną ideą:

Co jest wyjątkowego w przypadku wysokości automatycznej? Cóż, fakt, że pozwala dynamicznie zmieniać wysokość, oczywiście!

1. Clone element
2. Umieścić go w widoczności: ukryte i position: absolute
3. usunąć jego zawartość
4. Zobacz czy zmienił wysokość (powinna ona wynosić około 0 teraz).

5. Cleanup

   var isAutoHeight = function (element) {// dokonać poczekalnia dla całej naszej pracy. $ ('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; 
   

   };

Answer 2

Spróbuj:

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

Sprawdź także następujące wtyczki:

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