jQueryの`width`、`innerWidth`、`outerWidth`の違いは何ですか?

jQuery での width、InnerWidth、OuterWidth の区別

これらのプロパティの違いを明確にするために、それらの定義と実際的な機能を詳しく調べてみましょう。

Width

• パディングを除き、ボーダーを含む要素の幅を表します。
  innerWidth
• パディングと要素を除く要素の幅を定義します。 borders.
  outerWidth
• パディングとボーダーの両方を含む要素の幅を含みます。

同様に、高さ、innerHeight、およびouterHeight は垂直方向の寸法で動作します。

指定された例では:

var div = $('.test');

要素には幅 200 ピクセル、高さ 150 ピクセルが定義されており、パディングやパディングはありません。国境。したがって、3 つの幅関連プロパティ (width、innerWidth、および outerWidth) はすべて「200px」を返します。同様に、高さに関連する 3 つのプロパティはすべて「150px」を返します。

ただし、要素にパディングまたはボーダーが適用された場合、結果は異なります。

<div class="test">

このシナリオでは:

• width はそのままになります"200px".
• innerWidth は "180px" (200px - 20px パディング) になります。
• outerWidth は "220px" (200px 2) になります× 5ピクセルborder).

これらのプロパティは、jQuery で要素の寸法を操作し、さまざまな CSS スタイルに対応するための詳細なレベルの制御を提供します。

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