Apakah Perbezaan Antara `lebar`, `innerWidth`, `outerWidth`, `height`, `innerHeight` dan `outerHeight` jQuery?

Sifat Dimensi jQuery: lebar, Lebar dalam, Lebar luar, tinggi,Tinggi dalam,Tinggi luar

Pustaka jQuery menyediakan pelbagai sifat untuk memanipulasi dan mendapatkan semula dimensi elemen HTML. Sifat ini termasuk lebar, Lebar dalam, Lebar luar, tinggi, tinggi dalam danTinggi luar. Memahami perbezaannya adalah penting untuk kawalan yang tepat ke atas saiz elemen.

lebar dan tinggi berbanding dalamLebar dan dalamKetinggian

Sifat lebar dan tinggi mewakili dimensi keseluruhan elemen , termasuk kandungan dan pelapiknya tetapi tidak termasuk sempadan dan bar skrolnya. InnerWidth dan innerHeight, sebaliknya, tidak termasuk pelapik dan mewakili dimensi kawasan kandungan dalam elemen.

OuterWidth dan outerHeight

outerWidth dan outerHeight merangkumi segala-galanya dalam elemen, termasuk kandungannya, pelapik, sempadan dan bar skrol. Ini membolehkan anda menentukan dengan tepat jumlah ruang yang diduduki elemen pada halaman, walaupun dengan jidar dan sempadan berubah.

Contoh

Pertimbangkan kod HTML berikut:

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

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

Menggunakan jQuery, kita boleh mendapatkan semula dimensi ".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)

Seperti yang anda lihat, sifat lebar, tinggi, Lebar dalam, Ketinggian dalam, Lebar luar dan Tinggi luar memberikan tahap kebutiran yang berbeza dalam mengukur dimensi elemen, membolehkan fleksibiliti dan kawalan tepat ke atas reka letak dan penampilan halaman web anda.

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