Mengapakah `height()` dan `width()` jQuery Mengembalikan Nilai Bukan Sifar untuk Elemen dengan `display:none`?

Tingkah Laku Luar Biasa jQuery() dan Width() dengan "display:none"

kaedah jQuery's height() dan width() ialah digunakan secara meluas untuk menentukan dimensi unsur yang boleh dilihat pada halaman web. Walau bagaimanapun, nampaknya terdapat tingkah laku yang tidak dijangka apabila berurusan dengan elemen yang mempunyai set sifat CSS "display:none".

Persoalannya

Secara tradisinya, ia dipercayai bahawa elemen dengan "display:none" mempunyai ketinggian dan lebar sifar. Walau bagaimanapun, ini tidak selalu berlaku dengan jQuery. Pertimbangkan contoh berikut:

<code class="html"><div id="target" style="display:none;">
  a
</div></code>

<code class="css">alert($("#target").height());</code>

Dalam contoh ini, ketinggian elemen "sasaran" bukan sifar sebaliknya nilai bukan sifar. Ketidakkonsistenan ini menimbulkan persoalan: mengapa elemen dengan "display:none" kadangkala mengembalikan ketinggian dan lebar bukan sifar dalam jQuery?

Jawapannya

Untuk memahami tingkah laku ini , kita perlu menyelidiki cara dalaman kaedah height() dan width() jQuery. Apabila elemen mempunyai offsetWidth 0 yang boleh dilihat (menunjukkan ia "tersembunyi"), jQuery cuba mengira dimensi sebenarnya. Ia melakukan ini dengan mengatasi sementara sifat CSS elemen:

• kedudukan: "mutlak"
• keterlihatan: "tersembunyi"
• paparan: "sekat"

Dengan pengubahsuaian ini, jQuery mendapatkan semula ketinggian elemen, dengan mengambil kira jidar dan pelapik sebagaimana perlu. Setelah ketinggian ditentukan, jQuery memulihkan sifat CSS asal, memastikan tiada perubahan yang boleh dilihat berlaku.

Proses ini membolehkan ketinggian() dan lebar() berfungsi dengan betul untuk elemen tersembunyi, selagi ibu bapa mereka kelihatan. Pada asasnya, jQuery mensimulasikan tingkah laku menunjukkan elemen di luar aliran dokumen, mendapatkan semula dimensinya dan kemudian menyembunyikannya semula, semuanya di belakang tabir dalam satu operasi. Ini menghapuskan keperluan untuk pembangun untuk menunjukkan dan menyembunyikan elemen secara manual untuk mendapatkan dimensinya.

Atas ialah kandungan terperinci Mengapakah `height()` dan `width()` jQuery Mengembalikan Nilai Bukan Sifar untuk Elemen dengan `display:none`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!