如何从一个隐藏的元素getBoundingClientRect？ （在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秒。这里有一点proof-of-concept这种行为。

取而代之，您必须先隐藏原始值display，然后再隐藏它。实际上，这正是jQuery和其他流行框架在执行.hide()时所做的：

匹配的元素将立即隐藏，没有动画。 除了显示属性的值保存在jQuery的 数据高速缓存中以便稍后可以将显示恢复到其初始值之外，这大致等同于调用.css（“display”，“none”）， 。 如果一个元素具有内联显示值并且被隐藏然后显示，那么它将再次以内联方式显示。