jQuery のディメンション: `width`、`innerWidth`、`outerWidth`、`height`、`innerHeight`、`outerHeight` の違いは何ですか?

jQuery: width、innerWidth、outerWidth、height、innerHeight、outerHeight の違いを理解する

jQuery でディメンションを操作する場合、 width、innerWidth、outerWidth、height、innerHeight、outerHeight の微妙な違いを理解することが重要です。一見すると互換性があるように見えますが、これらのプロパティはそれぞれ特定の目的を果たします。

幅と高さ

幅と高さは要素の表示寸法を表します。そのコンテンツとパディングを含みます。この例では、CSS を使用してこれらの寸法で要素を定義したため、これらのプロパティはそれぞれ 200px と 150px を返します。

innerWidth および innerHeight

innerWidth および innerHeight は、パディングを除いた、要素のコンテンツ領域の寸法。この例では要素にパディングを適用していないため、これらのプロパティも 200px と 150px を返し、width と height と同じ結果が得られます。 🎜>outerWidth と externalHeight は、コンテンツ、パディング、境界線を含む要素の合計寸法を表します。要素の場合、これらのプロパティには境界線が含まれていないため、幅と高さと同じ値が返されます。

例

違いをさらに詳しく説明するために、以下を追加してみましょう。例の要素へのパディングと境界線:

今度は、要素の幅と高さ (コンテンツとパディングを含む)はそれぞれ 240px と 190px、innerWidth と innerHeight (コンテンツ領域のみ) は 200px と 150px、outerWidth とouterHeight (境界線を含む合計寸法) は 260px と 210px になります。

結論

.test {
  padding: 20px;
  border: 10px solid red;
}

これらのディメンション プロパティの違いを理解することで、開発者は次のことが可能になります。 Web ページ上の要素を正確に計算して配置します。

以上がjQuery のディメンション: `width`、`innerWidth`、`outerWidth`、`height`、`innerHeight`、`outerHeight` の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。