需要找到页面上隐藏div的高度（设置为display：none）

Question

我需要测量隐藏元素内部的 div 的 offsetHeight。

<div id="parent" style="display: none;">
    <div id="child">Lorem Ipsum dolor sit amet.</div>
</div>

父 div 必须设置为“display:none”。我对此无法控制。我意识到子 div 的 offsetHeight 将是 0。我需要找到一个解决方法。

我玩过的事情是，当页面加载时，我复制父节点的子节点，注入页面上设置为“visiblity:hidden”的div。然后我测量这些元素的高度，并在完成后删除节点。

还有其他想法吗？

更新： 我最终要做的是：

使用 YUI 2，在页面加载时，我发现给定类名的所有元素要么设置为 display:none，要么高度和宽度为 0（这是衡量是否元素存在，或者父元素设置为 display:none)。然后我将该元素设置为 display:block。然后我检查它的父母是否有同样的事情并向父母展示，直到它找到可见的父母。一旦最高的显示：无祖先设置为显示：块，我就可以测量我的元素。

测量完所有元素后，我将所有元素重置回显示：无。

Answer 1

当您获取元素的尺寸时，您需要在很短的时间内使元素的父级可见。在通用解决方案中，通常会遍历所有祖先并使其可见。然后它们的 display 值被设置回原始值。

当然还有性能问题。

我们在 Prototype.js 实现中考虑了这种方法，但最终采用了 getWidth 和 getHeight 仅使实际元素可见，而不遍历祖先。

替代解决方案（例如将元素从“隐藏”父级中取出）的问题在于，一旦元素脱离了“常规”层次结构，某些样式可能不再适用于该元素。如果您有这样的结构：

<div class="foo" style="display:none;">
  <div class="bar">...</div>
</div>

和这些规则：

.bar { width: 10em; }
.foo .bar { width: 15em; }

那么从其父元素中取出元素实际上会导致错误的尺寸。

Answer 2

解决方法是将 height 设置为 0

.hidden { 
  height: 0; 
  overflow: hidden; 
}

然后获取元素 scrollHeight。

document.querySelector('.hidden').scrollHeight

尽管元素没有出现，但滚动高度将正确地给出高度。我认为它也不影响元素流。

示例： https://jsfiddle.net/de3vk8p4/7/
参考：https://developer.mozilla.org /en-US/docs/Web/API/CSS_Object_Model/Det​​ermining_the_dimensions_of_elements#How_big_is_the_content.3F

Answer 3

如果您使用 style.display = "none"，该元素的宽度和高度将为 0，
但是使用 style.visibility = "hidden" ，元素将具有由浏览器计算的宽度和高度（通常）。

Answer 4

您可以克隆该元素，将其绝对定位在-10000、-10000，测量克隆并销毁它。

Answer 5

制作了一个纯js解决方案，没有Jquery，也没有克隆（我想更快），

var getHeight = function(el) {
    var el_style      = window.getComputedStyle(el),
        el_display    = el_style.display,
        el_position   = el_style.position,
        el_visibility = el_style.visibility,
        el_max_height = el_style.maxHeight.replace('px', '').replace('%', ''),

        wanted_height = 0;

    // if its not hidden we just return normal height
    if(el_display !== 'none' && el_max_height !== '0') {
        return el.offsetHeight;
    }

    // the element is hidden so:
    // making the el block so we can meassure its height but still be hidden
    el.style.position   = 'absolute';
    el.style.visibility = 'hidden';
    el.style.display    = 'block';

    wanted_height     = el.offsetHeight;

    // reverting to the original values
    el.style.display    = el_display;
    el.style.position   = el_position;
    el.style.visibility = el_visibility;

    return wanted_height;
}

这里是演示
https://jsfiddle.net/xuumzf9k/1/

如果您能找到任何改进，请告诉我对此（因为我在我的主要项目中使用它）

Answer 6

辅助函数 ---

/**
 * Get an element's computed style, optionally locking width/height.
 * @param el Element to measure
 * @param lockWidth Lock width to current width to measure height
 * @param lockHeight Lock height to current height to measure width
 * @returns Element's DOMRect
 */
export const getElementRect = (el: HTMLElement, lockWidth = true, lockHeight = false): DOMRect => {
  const clone     = el.cloneNode(true) as HTMLElement;
  clone.style.cssText = 'position:fixed;top:0;left:0;overflow:auto;visibility:hidden;pointer-events:none;width:unset;min-width:unset;max-width:unset;height:unset;min-height:unset;max-height:unset;'
  if (lockWidth || lockHeight) {
    const { width, height } = el.getBoundingClientRect();
    if (lockWidth) clone.style.cssText += `width:${ width }px;`;
    if (lockHeight) clone.style.cssText += `height:${ height }px;`;
  }
  document.body.append(clone);
  const rect = clone.getBoundingClientRect();
  clone.remove();
  return rect;
};

1. 创建元素的克隆
2. 将样式设置为屏幕外并重置高度/宽度样式
3. 将克隆附加到 DOM，获取 DOMRect，然后将其删除，

默认情况下 - 将锁定宽度以在此宽度测量高度。大多数用例需要测量其栖息地中的元素的高度偏移，因此这可以确保测量准确。

一个具有“类似手风琴”的动画打开/关闭的示例，允许动态高度。

function getElementRect(el, lockWidth, lockHeight) {
  if (lockWidth === undefined) lockWidth = true;
  const clone     = el.cloneNode(true);
  clone.style.cssText = 'position:fixed;top:0;left:0;overflow:auto;visibility:hidden;pointer-events:none;width:unset;min-width:unset;max-width:unset;height:unset;min-height:unset;max-height:unset;'
  if (lockWidth || lockHeight) {
    const { width, height } = el.getBoundingClientRect();
    if (lockWidth) clone.style.cssText += `width:${ width }px;`;
    if (lockHeight) clone.style.cssText += `height:${ height }px;`;
  }
  document.body.append(clone);
  const rect = clone.getBoundingClientRect();
  clone.remove();
  return rect;
};

var expanded = false;
var timeout;

function toggle() {
  var el = document.getElementById('example');
  expanded = !expanded;

  if (expanded) {
    el.style.maxHeight = getElementRect(el).height + 'px';

    // Remove max-height setting to allow dynamic height after it's shown
    clearTimeout(timeout);
    var openTimeout = timeout = setTimeout(function() {
      el.style.maxHeight = 'unset';
      clearTimeout(openTimeout);
    }, 1000); // Match transition
  } else {
    // Set max height to current height for something to animate from
    el.style.maxHeight = getElementRect(el).height + 'px';

    // Let DOM element update max-height, then set to 0 for animated close
    clearTimeout(timeout);
    var closeTimeout = timeout = setTimeout(function() {
      el.style.maxHeight = 0;
      clearTimeout(closeTimeout);
    }, 1);
  }
}

#example {
  overflow: hidden;
  max-height: 0;
  transition: max-height 1s;
}

<button onclick="toggle()">Toggle</button>
<div id="example">
  <textarea>Resize me</textarea>
</div>

Answer 7

所以这里是基于 lod3n 的答案并在 999 的评论的帮助下工作的 jQuery 解决方案：

var getHiddenElementHeight = function(element){
    var tempId = 'tmp-'+Math.floor(Math.random()*99999);//generating unique id just in case
    $(element).clone()
    .css('position','absolute')
    .css('height','auto').css('width','1000px')
    //inject right into parent element so all the css applies (yes, i know, except the :first-child and other pseudo stuff..
    .appendTo($(element).parent())
    .css('left','-10000em')
    .addClass(tempId).show()
    h = $('.'+tempId).height()
    $('.'+tempId).remove()
    return h;
}

享受！

Answer 8

在JS中请使用'scrollHeight'

示例代码

假设这个div隐藏在DOM中

<div class="test-div">
 //Some contents 
<div>

Javascript来找到这个div的高度

const testHeight = document.querySelector('.test-div');

testHeight.scrollHeight

Answer 9

使用 z-index 将元素隐藏在非透明元素下，显示它并获取高度。

Answer 10

在渲染元素之前，它没有高度。即使您克隆父对象并将其显示在用户看不到的地方，也不能保证克隆的高度与隐藏对象的最终大小相同。

有很多因素会影响不一定在克隆中渲染的高度 - DOM 中的任何内容及其与 CSS 规则的交互都可能导致 DOM 任何其他元素的渲染发生变化。如果不克隆整个文档（即使这也不是万无一失的），您就无法确定隐藏对象的高度。

如果您必须在向用户显示高度之前知道高度，则必须通过尽可能短的时间显示它然后再次隐藏它来“破解”它。最有可能的是，用户会看到这个问题并且对结果不满意。

Answer 11

因此，您甚至无法将 display:none; 更改为 height:0;溢出：隐藏；？也许你可以在你自己的样式表中覆盖它，如下所示：

div#parent { display: block !important; height:0; overflow:hidden; }

然后当你使用 YUI （假设 YUI 2）时，你可以使用这个：

var region = YAHOO.util.Dom.getRegion('child');

获取子项的尺寸和偏移量。

Answer 12

尝试使用：

#parent{ display:block !important; visibility:hidden; position:absolute} 

Answer 13

我最终要做的是：

使用 YUI 2，在页面加载时，我发现给定类名的所有元素要么设置为 display:none，要么高度和宽度为 0（这是衡量是否元素存在，或者父元素设置为 display:none)。然后我将该元素设置为 display:block。然后我检查它的父母是否有同样的事情并向父母展示，直到它找到可见的父母。一旦最高的显示：无祖先设置为显示：块，我就可以测量我的元素。

测量完所有元素后，我将所有元素重置回显示：无。

Answer 14

你尝试过这个吗？

setTimeout('alert($(".Var").height());',200);