如何从隐藏元素获取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 不支持initial值（ mdn ）。 所以赋值什么都不做，元素保持隐藏，这就是为什么你得到 0 作为结果高度。

但即使它没有，它不会工作您预期的方式： display: initial设置为通用初始值display为所有受影响的元素-这是inline都对div S和span秒。 这里有一些关于这种行为的概念证明。

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

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

Answer 2

这可能会间接回答这个问题 - 如果您需要为隐藏元素使用 getBoundingClientRect() ，另一种选择是以不同的方式隐藏它（除了 display:none）。 例如，将颜色和/或背景颜色设置为透明。