jQuery の height() と width() が非表示の要素の値を返すのはなぜですか?

jQuery: 非表示の要素と寸法プロパティ

一般的な想定に反して、display:none を持つ要素は jQuery の高さとして常に 0 を返すとは限りません。 () メソッドと width() メソッド。この期待からの逸脱は、プログラマの間で長引く混乱の対象となっています。

謎の解明

この矛盾は、jQuery が display:none スタイルで要素を処理する方法から生じます。 。要素のオフセット幅が 0 (実質的に非表示であることを示す) の場合、jQuery は内部計算を使用してその高さを決定しようとします:

1. 一時変換: 要素の一時的な変更を行います。 jQuery.swap() を使用した CSS プロパティ:

   • 位置を「絶対」に設定します
   • 可視性を「非表示」に設定します
   • 表示を「ブロック」に設定します
2. 高さの測定: これらの変更により、getWidthOrHeight(...) を使用して高さを取得します。
3. プロパティの復元:最後に、CSS プロパティを以前の値に戻し、要素を効果的に再度非表示にします。

このプロセス全体は、UI スレッドが更新される前にシームレスに実行され、要素の寸法を取得しながら要素の非表示状態が維持されます。 display:none 要素に height() および width() 経由でアクセスできるようにすることで、jQuery は、可視性のステータスに関係なく、要素の寸法に関係する計算を実行できるようにします。

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