Mengapakah kaedah `.height()` dan `.width()` jQuery mengembalikan nilai untuk elemen dengan `display: none`?

jQuery: .height()/.width() dan "display:none"

Walaupun andaian popular bahawa unsur-unsur dengan "display :none" mengembalikan sifar untuk kaedah .height() dan .width() jQuery, ini tidak selalu berlaku. Dalam contoh yang disediakan, elemen sasaran mengembalikan ketinggian bukan sifar walaupun ia tersembunyi.

Mengapa ini berlaku?

Menurut kod sumber jQuery, jika offsetWidth elemen ialah 0 ( menunjukkan bahawa jQuery menganggapnya "tersembunyi"), satu siri langkah diambil untuk menentukan ketinggian:

1. Kedudukan elemen ditetapkan kepada "mutlak".
2. Keterlihatan ditetapkan kepada "tersembunyi".
3. Paparan ditetapkan kepada "sekat".

Ini dengan berkesan mengalihkan elemen keluar daripada aliran dokumen, mengira ketinggian sambil mengira sempadan/lapik, dan kemudian mengembalikan tetapan sebelumnya.

Jadi, jQuery pada asasnya menjadikan elemen kelihatan buat sementara waktu, mengira ketinggian dan menjadikannya tidak kelihatan semula, semuanya sebelum UI benar-benar dikemas kini. Ini membolehkan .height() dan .width() berfungsi walaupun pada elemen tersembunyi asalkan ibu bapa mereka kelihatan.

Kaedah .height() dan .width() mengendalikan proses paparan/sembunyi ini secara dalaman, jadi pembangun tidak perlu melaksanakan semakan sedemikian secara manual dalam kod mereka.

Atas ialah kandungan terperinci Mengapakah kaedah `.height()` dan `.width()` jQuery mengembalikan nilai untuk elemen dengan `display: none`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!