jQuery の `height()` と `width()` が `display:none` を持つ要素に対して 0 以外の値を返すのはなぜですか?

jQuery の型破りな Height() および width() 「display:none」での動作

jQuery の height() メソッドと width() メソッドは次のとおりです。 Web ページ上の要素の表示寸法を決定するために広く使用されています。ただし、CSS プロパティ「display:none」が設定されている要素を扱う場合、予期しない動作が発生するようです。

質問

伝統的には、次のように信じられていました。 「display:none」を持つ要素の高さと幅はゼロです。ただし、jQuery では必ずしもそうとは限りません。次の例を考えてみましょう。

<code class="html"><div id="target" style="display:none;">
  a
</div></code>

<code class="css">alert($("#target").height());</code>

この例では、「ターゲット」要素の高さはゼロではなく、ゼロ以外の値です。この矛盾により、「display:none」の要素が jQuery でゼロ以外の高さと幅を返すことがあるのはなぜですか?

答え

この動作を理解するには、jQuery の height() メソッドと width() メソッドの内部動作を詳しく調べる必要があります。要素の可視 offsetWidth が 0 (「非表示」であることを示す) である場合、jQuery はその実際の寸法を計算しようとします。これは、要素の CSS プロパティ:

• position: "absolute"
• visibility: "hidden"
• display: "block"
を一時的にオーバーライドすることによって行われます。

これらの変更により、jQuery は必要に応じてボーダーとパディングを考慮して要素の高さを取得します。高さが決定されると、jQuery は元の CSS プロパティを復元し、目に見える変更が発生しないようにします。

このプロセスにより、親が表示されている限り、非表示の要素に対して height() と width() が正しく動作できるようになります。基本的に、jQuery は、ドキュメント フローの外側で要素を表示し、その寸法を取得し、再度非表示にする動作を、すべて 1 回の操作で舞台裏でシミュレートします。これにより、開発者が要素の寸法を取得するために要素を手動で表示または非表示にする必要がなくなります。

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