1

JavaScript ソリューション (jQuery で問題ありません) を探して、表示が none に設定された親 div にすべて存在する div の高さを取得します。

擬似コード:

<div id="hiddenParent" style="display:none">
  <div class="childDiv">child div 1</div>
  <div class="childDiv">child div 2</div>
  <div class="childDiv">child div 3</div>
</div>

クラスChildDivが高さを指定しておらず、childDiv要素の高さがどこにも設定されていないとしましょう。

「hiddenParent」が display:none に設定されている場合、高さを取得する方法についてのアイデアはありますか?

4

4 に答える 4

2 
var clone = $("#hiddenParent").clone().css("display","block").css("position","absolute").css("left","-9999px");
$("#hiddenParent").after(clone);

alert(clone.outerHeight());
clone.remove();
​

jQueryを使用しています。

于 2012-08-31T17:55:17.647 に答える
1

パーティーに遅れましたが、とにかくこれについて私の見解を述べます。次のソリューションは Vanilla Javascript で記述されていますが、同じロジックが明らかに jQuery に適用されます。

要素は、測定するために必ずしも可視である必要はありません。可視である必要はありませんdisplay: none;。Display:none は、計算されたスタイルの高さが 0 であることを意味するため、回避策を見つける必要があります。

display:none2 つの簡単な手順でa をエミュレートできます。

  1. 設定しますvisibility:hidden（要素が表示されないようにします）
  2. 設定しますposition:absolute（そのため、要素はスペースを取りません）

次に、それをに設定しますdisplay(blockまたは空の文字列、そうでない限り問題ではありませんnone)。次に、ドキュメントにスペースをとらない非表示の div を作成しますが、独自の元のサイズを保持します。これにより、以前に css でディメンションが設定されていなくても、JavaScript を介して完全にアクセスできるようになります。

ループでgetComputedStyle、必要な各 div に対して実行し、その高さを探します。

 // start loop

 getComputedStyle(el).getPropertyValue('height');

 // end loop

ループの最後にディスプレイを none に設定する必要がある場合は、元に戻すことができます。スクリプトは複雑なものではなく、ちらつきもなく実行されます。

ここにデモがあります。

var par = document.getElementById('hiddenParent'),
    cd = par.querySelectorAll('.childDiv'),
    len,
    heights = [],
    i;

function getHeight(){
    len = cd.length;
  // 1.we hide the parent
    par.style.visibility = 'hidden';
  // 2. we set its position to absolute, so it does not 
  // take space inside the window
    par.style.position = 'absolute';
  // 3. we set its display to block so it will gain back its natural height
    par.style.display = 'block';   

  // 4. we start looping over its children
    while(len--){
  // we get the height of each children... here we're just storing them in array,
  // which we will alert later
      heights[len] = window.getComputedStyle( cd[len] ).getPropertyValue('height');
    }
  // 5. Job is done, we can bring back everything to normal (if needed)
    par.cssText = 'display: none';   
}

document.getElementById('starter').addEventListener('click',function(){
   getHeight();
   alert(heights);
});
#hiddenParent, .another-div{
    background: teal;
    width: 40%;
    padding: 20px;
    text-align: center;
    color: white;
    font-family: Arial;
    text-transform: uppercase;
    color: #ccc;
}
.childDiv{
    background: purple;
    padding: 10px;
    margin-bottom: 10px;
}

.another-div{
    background: orange;
    color: #1F9091;
}
<button id="starter"> Calculate heights </button>

<!-- hiddenParent is between two other divs but takes no space in the document as it's display:none -->
<div id="hiddenParent" style="display: none;">
  <div class="childDiv">child div 1</div>
  <div class="childDiv">child div 2</div>
  <div class="childDiv">child div 3</div>
</div>


<div class="another-div">
    here's another div
</div>

于 2014-06-17T23:16:39.063 に答える
1

jQuery: Get height of hidden element in jQuery を見てみてください。

この問題に関する多くの良い投稿があります。

于 2012-08-31T17:55:15.110 に答える
1

divjQuery が要素の高さを取得した後に非表示にすることができます。

HTML (マイナススタイル)

<div id="hiddenParent">
  <div class="childDiv">child div 1</div>
  <div class="childDiv">child div 2</div>
  <div class="childDiv">child div 3</div>
</div>​

JQ

var height = $(".childDiv").height();
$("#hiddenParent").hide();
alert(height);​

http://jsfiddle.net/charlescarver/2Ndte/

注: このコードは単なる例であり、最初の子の高さのみを取得しますが、隠し要素の高さを取得する方法の要点は理解できます。

于 2012-08-31T17:57:47.177 に答える