jQuery の `height()` 関数と `width()` 関数が `display: none` を持つ要素の値を返すのはなぜですか?

jQuery: height()/width() vs. "display:none"

要素が CSS スタイルであると想定しているかもしれません「display:none」の場合、jQuery では height() と width() に 0 が返されます。ただし、提供された例で示されているように、これは常に当てはまるわけではありません。

なぜこれが起こるのでしょうか?この動作を理解するには、jQuery が非表示要素をどのように処理するかを詳しく調べる必要があります。

要素の offsetWidth が 0 (jQuery はこれを「非表示」と解釈します) を持つ場合、要素の高さを決定しようとします。これは、要素のスタイルを一時的に変更することで実現されます:

• position: "absolute"
• visibility: "hidden"
• display: "block"

getWidthOrHeight(...) で高さを取得し、必要に応じて境界線やパディングを調整すると、以前のスタイルが復元されます。

本質的に、jQuery は非表示の要素を取得し、それを一時的に表示します。ドキュメント フローの外側で高さを取得し、再度非表示にしますが、すべてページの外観に影響を与えることはありません。これにより、親が表示されている場合、height() と width() は非表示の要素であっても正確な測定値を提供できるようになります。

このメカニズムは jQuery の height() メソッドと width() メソッドに組み込まれているため、ユーザーが行う必要がなくなります。要素の可視性を手動で操作します。

以上がjQuery の `height()` 関数と `width()` 関数が `display: none` を持つ要素の値を返すのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。