隠し要素からBoundClientRectを取得する方法は？ （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のための普遍的な初期値を設定します - それはdiv sおよびspanのためinline両方です。ここには、この動作の小さなproof-of-conceptがあります。

代わりに元の値displayを非表示にする前に、独自のコードでキャッシュする必要があります。実際、jQueryやその他の一般的なフレームワークは、.hide()の実装でどういうことをしていますか：

一致する要素はすぐに非表示になり、アニメーションは表示されません。 これは、表示プロパティーの値がjQueryの データキャッシュに保存され、後で表示が初期値のに復元できる点を除いて、.css（ "display"、 "none"）を呼び出すのとほぼ同じです。 エレメントにインラインの表示値があり、表示されていない場合は がインラインで表示されます。