Apakah Perbezaan Antara `width`, `innerWidth` dan `outerWidth` jQuery?

Membezakan Lebar, InnerWidth dan OuterWidth dalam jQuery

Untuk menjelaskan perbezaan antara sifat ini, mari kita mendalami definisi dan praktikalnya pelaksanaan.

Lebar

• Mewakili lebar elemen, tidak termasuk pelapik tetapi termasuk sempadan.
  Lebar dalam
• Mentakrifkan lebar elemen, tidak termasuk pelapik dan sempadan.
  Lebar luar
• Merangkumi lebar elemen, termasuk kedua-dua pelapik dan sempadan.

Begitu juga, tinggi, 🎜>Tinggi dalaman, dan OuterHeight beroperasi pada dimensi menegak.

Dalam contoh yang anda berikan:

var div = $('.test');

Elemen mempunyai lebar yang ditentukan 200px, ketinggian 150px dan tiada pelapik atau sempadan. Oleh itu, ketiga-tiga sifat berkaitan lebar (lebar, InnerWidth dan outerWidth) mengembalikan "200px". Begitu juga, ketiga-tiga sifat berkaitan ketinggian mengembalikan "150px".

Walau bagaimanapun, jika pelapik atau jidar digunakan pada elemen, hasilnya akan berbeza-beza:

<div class="test">

Dalam senario ini:

• lebar masih akan "200px".
• InnerWidth akan menjadi "180px" (200px - 20px padding).
• outerWidth akan menjadi "220px" (200px 2). × 5px sempadan).

Sifat ini menyediakan tahap kawalan berbutir untuk bekerja dengan dimensi elemen dalam jQuery dan menampung pelbagai gaya CSS.

Atas ialah kandungan terperinci Apakah Perbezaan Antara `width`, `innerWidth` dan `outerWidth` jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!