javascript_javascriptスキルで非表示要素(display:none)の高さと幅を取得する方法

JS は、表示される要素のサイズを取得するのに比較的便利です。このメソッドを直接使用できます。

コードをコピーします

function getDefaultStyle(obj,attribute){ // IE および DOM と互換性のある最終的なスタイル関数を返し、パラメータを設定します: 要素オブジェクト、スタイル特性
return obj.currentStyle ?obj.currentStyle[attribute ]:document.defaultView.getComputedStyle(obj,false)[attribute];
}

ただし、この要素が非表示 (display:none) の場合、サイズが不明ですが、上記の方法が機能しないのはなぜですか。なぜなら、display:none を持つ要素には物理的なサイズがないからです。 悲劇はこうして起きた！

幸いなことに、CSS には非表示属性である Visibility:hidden があり、display:none との最大の違いは、visibility:hidden には物理サイズがあることです。物理サイズがあれば上記の方法でサイズを取得できますが、display:noneをvisibility:hiddenに変更した後、取得直後にvisibility:hiddenをdisplay:noneに変更してもページには空白ができてしまいます。サイズ、ページはまだ少し揺れる部分があります。その場合、最良の方法は、非表示の要素を画面外、またはドキュメント フローの外に移動することです (位置: 絶対)。これは完璧に見えますが、この要素を再度表示したい場合、この要素は非表示になり、位置が間違っています。これは、この要素が Visibility:hidden;position:absolute であるためです。したがって、サイズを取得した後、スタイルを元に戻す必要があります。位置と可視性のプロパティを元のスタイルに戻すだけです。

これは、js の隠し要素のサイズを取得する基本的な実装方法です。興味のある方は、書籍「JavaScript をマスターする」で方法を読むことができます。

ここで簡単なデモも作成しました。ソース コードをご覧ください:

コードをコピーします コードは次のとおりです:

 

这是test容器，可见容器
这是test容器，可见容器
这是test容器，可见容器
这是test容器，可见容器
这是test容器，
这是test容器，
这是test容器，
这是test容器，
这是test容器，

 

这是test容器，这是test容器，
这是test容器，
这是test容器，
这是test容器，
这是test容器，
这是test容器，

       

点我

補足: 一般的な js のフレームには、jQ のようにこのメソッドがパッケージ化されており、height() と width() メソッドを直接使用して要素のサイズを取得できます。