Question

寻找一个JavaScript解决方案（jQuery会很好）来获取一些div的高度，这些div都驻留在父div中，显示设置为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>

假设类ChildDiv没有指定高度，也没有任何childDiv元素的高度设置在任何地方。

当“hiddenParent”设置为display：none时，

关于如何获得高度的任何想法？

Answer 1

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

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

使用jQuery。

Answer 2

尝试查看jQuery: Get height of hidden element in jQuery

关于这个问题，有很多好的帖子。

Answer 3

在jQuery获取元素的高度后，您可以隐藏div。

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/

_{注意：这段代码只是一个例子，只能得到第一个孩子的高度，但你得到了如何获得隐藏元素高度的要点。}

Answer 4

参加派对的时间很晚，但无论如何我都会考虑这个。以下解决方案是用Vanilla Javascript编写的，但同样的逻辑显然适用于jQuery。

元素不一定需要才能被衡量，他们只需不就可以display: none;。显示：none表示计算样式中的0高度，因此我们必须找到变通方法。

我们可以通过两个简单的步骤来模拟display:none：

我们设置visibility:hidden（因此元素不可见）
我们设置position:absolute（因此元素不占空间）

然后我们将其display设置为block（或空字符串，只要它不是none就没关系）。然后我们将有一个不可见的div，它不会在文档中占用空间，但会保留自己的原始尺寸。通过这种方式，它可以通过JavaScript完全访问，即使在css中没有预先设置维度。

在一个循环中，我们将针对我们需要的每个div运行getComputedStyle，寻找它的高度。

 // start loop

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

 // end loop

如果仍需要在循环结束时将显示设置为无，则可以将其恢复。该脚本实际上并不复杂，并且运行没有任何闪烁。

这是demo。

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>

得到div的高度，都在隐藏的div中

4 个答案: