jQueryの「width」、「innerWidth」、「outerWidth」、「height」、「innerHeight」、「outerHeight」の違いは何ですか?

jQuery のディメンション プロパティ: width、innerWidth、outerWidth、height、innerHeight、outerHeight

jQuery ライブラリには、 HTML要素の寸法。これらのプロパティには、width、innerWidth、outerWidth、height、innerHeight、outerHeight が含まれます。要素のサイズを正確に制御するには、これらの違いを理解することが重要です。

幅と高さ、innerWidth と innerHeight の比較

幅と高さのプロパティは、要素の全体の寸法を表します。 、コンテンツとパディングを含みますが、境界線とスクロールバーは除きます。一方、innerWidth と innerHeight は、パディングを除外し、要素内のコンテンツ領域の寸法を表します。

outerWidth と externalHeight

outerWidth と externalHeight には、要素内のすべてが含まれます。要素 (コンテンツ、パディング、境界線、スクロールバーを含む)。これにより、余白や境界線が可変の場合でも、ページ上で要素が占める合計スペースを正確に判断できます。

例

次の HTML コードを考えてみましょう。

<div class="test">
  <p>Hello World!</p>
</div>

.test {
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 1px solid #000;
}

jQuery を使用すると、「.test」のディメンションを取得できます。 div:

var myDiv = $('.test');
var width = myDiv.width(); // 220px (width + padding + border)
var innerWidth = myDiv.innerWidth(); // 200px (width + padding)
var outerWidth = myDiv.outerWidth(); // 222px (width + padding + border + margin)

var height = myDiv.height(); // 170px (height + padding + border)
var innerHeight = myDiv.innerHeight(); // 150px (height + padding)
var outerHeight = myDiv.outerHeight(); // 172px (height + padding + border + margin)

ご覧のとおり、width、height、innerWidth、innerHeight、outerWidth、outerHeight プロパティは、要素の寸法を測定する際にさまざまなレベルの粒度を提供し、レイアウトとレイアウトを柔軟かつ正確に制御できるようにします。 Web ページの外観

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