Dimensi jQuery: Apakah Perbezaan Antara `lebar`, `lebar dalam`, `Lebar luar`, `tinggi`, `Tinggi dalam` dan `Tinggi luar`?

jQuery: Memahami Perbezaan antara lebar, innerWidth, outerWidth, height, innerHeight dan outerHeight

Apabila bekerja dengan dimensi dalam jQuery, ia adalah penting untuk memahami perbezaan halus antara lebar, innerWidth, outerWidth, height, innerHeight dan outerHeight. Walaupun ia kelihatan boleh ditukar pada pandangan pertama, setiap sifat ini mempunyai tujuan tertentu.

lebar dan tinggi

lebar dan tinggi mewakili dimensi yang boleh dilihat bagi sesuatu elemen, termasuk kandungan dan pelapiknya. Dalam contoh anda, sifat ini masing-masing mengembalikan 200px dan 150px, kerana anda telah menentukan elemen dengan dimensi tersebut menggunakan CSS.

innerWidth dan innerHeight

innerWidth dan innerHeight mewakili dimensi kawasan kandungan elemen, tidak termasuk pelapik. Memandangkan anda tidak menggunakan sebarang padding pada elemen dalam contoh anda, sifat ini juga mengembalikan 200px dan 150px, menghasilkan hasil yang sama seperti lebar dan tinggi.

OuterWidth dan outerHeight

Lebar luar dan Ketinggian luar mewakili jumlah dimensi elemen, termasuk kandungan, pelapik dan jidarnya. Untuk elemen anda, sifat ini tidak termasuk sempadan, jadi ia mengembalikan nilai yang sama seperti lebar dan tinggi.

Contoh

Untuk menunjukkan perbezaan lebih lanjut, mari tambah beberapa pelapik dan jidar kepada elemen dalam contoh anda:

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

Sekarang, lebar dan tinggi elemen (termasuk kandungan dan padding) masing-masing ialah 240px dan 190px, innerWidth dan innerHeight (kawasan kandungan sahaja) ialah 200px dan 150px, dan outerWidth dan outerHeight (jumlah dimensi termasuk jidar) ialah 260px dan 210px.

Kesimpulan

Memahami perbezaan antara sifat dimensi ini membolehkan pembangun mengira dan meletakkan elemen dengan tepat pada halaman web.

Atas ialah kandungan terperinci Dimensi jQuery: Apakah Perbezaan Antara `lebar`, `lebar dalam`, `Lebar luar`, `tinggi`, `Tinggi dalam` dan `Tinggi luar`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!