如何從一個隱藏的元素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」）， 。 如果一個元素具有內聯顯示值並且被隱藏然後顯示，那麼它將再次以內聯方式顯示。