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

【问题标题】：How to getBoundingClientRect from a hidden element? (doesn't work on IE)如何从隐藏元素中获取BoundingClientRect？（不适用于 IE）
【发布时间】：2017-07-30 05:19:10
【问题描述】：

我找到了一种从隐藏元素到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';

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

【问题讨论】：

标签： javascript html css internet-explorer

【解决方案1】：

遗憾的是，IE 不支持 initial 值 (mdn)。所以赋值什么都不做，元素保持隐藏，这就是为什么你得到 0 作为结果高度。

但即使这样做了，它也不会按您预期的方式工作：display: initial 为所有受影响的元素设置display 的通用初始值 - 对于divs 和@，inline 987654328@s。这是这种行为的小proof-of-concept。

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

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

【讨论】：

我使用element.style.display = 'block';使其工作

【解决方案2】：

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

【讨论】：