如何从隐藏元素获取BoundingClientRect？（不适用于 IE）

Question

我找到了getBoundingClientRect一种隐藏元素的方法：将其display样式设置为initial以便浏览器可以正确计算。然后立即隐藏该元素，使其永远不会显示给用户。

但它不适用于 IE。它总是返回0。

我怎样才能在 IE 上做到这一点？

var element = document.querySelector('#foo');

console.log('Element is hidden', element.getBoundingClientRect());

element.style.display = 'initial';
console.log('Element shows for little time', element.getBoundingClientRect());
element.style.display = 'none';

<div id="foo" style="display: none;">Guess my size, I'm hidden !</div>

Answer 1

遗憾的是，IE 不支持initialvalue ( mdn )。因此，赋值不会执行任何操作，并且元素保持隐藏状态，这就是为什么结果高度为 0。

但即使它确实如此，它也不会按照您预期的方式工作：为所有受影响的元素display: initial设置通用初始值display- 这inline对于divs 和spans 都是如此。以下是这种行为的一些概念验证。

display相反，您必须在隐藏之前通过自己的代码缓存原始值。实际上，这正是 jQuery 和其他流行框架的实现.hide()：

匹配的元素将立即隐藏，没有动画。这大致相当于调用 .css("display", "none")，只不过将 display 属性的值保存在 jQuery 的数据缓存中，以便稍后可以将 display 恢复为其初始值。如果一个元素的显示值为内联，并且隐藏然后显示，它将再次内联显示。