要素に 'auto'の高さがあるかどうかを検出する方法

Question

window.getComputedStyle(element).heightとelement.clientHeightの両方が、CSSで設定された値に関係なく、要素の現在の高さをピクセル単位で返します。

高さがauto、またはピクセル以外の単位に設定されているかどうかを調べる方法はありますか？ @pvnarulaは、彼はリンク先のページを通じて示唆

---

一つの解決策は、一時的にchange the contents of the element, then compare heightsです。 少しハック...

Answer 1

：

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

また、以下のプラグインをチェックし、他の回答に基づいて

とオンラインリサーチの多く私はすべての機能を1つの機能にまとめました。ここjsfiddleをチェックアウト： はゴースト要素法は、（前の回答）について説明** 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() 

：

：、ここでの主なアイデア**

グレッグ・ペティットはかなり良い答えin his blogを持っていたのです

自動高さの特長は何ですか？もちろん、高さを動的に変えることができます！隠された位置：要素

が視界に入れて

1. クローン絶対
2. それは高さが変更された場合（それは現在約0 する必要があります）を参照してください
コンテンツです削除します。 {// すべての私たちの仕事のためのステージング領域を

4. クリーンアップ

   するvar isAutoHeight =機能（要素）を作ります。 $（ '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

てみてください：アップデート

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