1

寻找一个 JavaScript 解决方案（jQuery 会很好）来获取一些 div 的高度，这些 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:none我们可以通过两个简单的步骤来模拟 a ：

  1. 我们设置visibility:hidden（所以元素不可见）
  2. 我们设置position:absolute（所以元素不占用空间）

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

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

 // start loop

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

 // end loop

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

这是一个演示。

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

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

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

江青

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

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

注意：此代码只是一个示例，只会获取第一个子元素的高度，但您将了解如何获取隐藏元素的高度的要点。

于 2012-08-31T17:57:47.177 回答