jQuery の `.height()` メソッドと `.width()` メソッドが `display: none` を持つ要素の値を返すのはなぜですか?

jQuery: .height()/.width() および "display:none"

「表示」を持つ要素は表示されるという一般的な想定にもかかわらず、 :none" は、jQuery の .height() メソッドと .width() メソッドに対してゼロを返しますが、常にそうであるとは限りません。提供された例では、ターゲット要素は非表示であってもゼロ以外の高さを返します。

なぜこれが起こるのですか?

jQuery のソース コードによると、要素の offsetWidth が 0 の場合 ( jQuery が「非表示」であるとみなしていることを示します)、高さを決定するために一連の手順が実行されます:

1. 要素の位置は「絶対」に設定されます。
2. 可視性は に設定されます。 "hidden".
3. 表示は "block" に設定されています。

これにより、要素がドキュメント フローの外に効果的に移動し、境界線/パディングを考慮しながら高さが計算されます。以前の設定を元に戻します。

したがって、jQuery は基本的に、UI が実際に更新される前に、要素を一時的に表示し、高さを計算し、再度非表示にします。これにより、.height() と .width() は、親が表示されている限り、非表示の要素でも機能することができます。

.height() メソッドと .width() メソッドは、この表示/非表示プロセスを内部的に処理します。そのため、開発者はそのようなチェックをコードに手動で実装する必要はありません。

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