Mengapa Fungsi `height()` dan `width()` jQuery Mengembalikan Nilai untuk Elemen dengan `display: none`?

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

Anda mungkin telah menganggap bahawa elemen dengan gaya CSS daripada "display:none" akan mengembalikan 0 untuk height() dan width() dalam jQuery. Walau bagaimanapun, seperti yang ditunjukkan dalam contoh yang diberikan, ini tidak selalu berlaku.

Mengapa ini berlaku? Untuk memahami tingkah laku ini, kita perlu menyelidiki cara jQuery mengendalikan elemen tersembunyi.

Jika elemen mempunyai offsetWidth 0 (yang ditafsirkan oleh jQuery sebagai "tersembunyi"), ia cuba menentukan ketinggiannya. Ia melakukan ini dengan mengubah sementara penggayaan elemen:

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

Setelah ketinggian diperoleh melalui getWidthOrHeight(...) dan dilaraskan untuk sempadan dan padding jika perlu, gaya sebelumnya dipulihkan.

Pada dasarnya, jQuery mengambil elemen tersembunyi, memaparkannya buat sementara waktu di luar aliran dokumen, mendapatkan semula ketinggiannya, dan kemudian menyembunyikannya semula, semuanya tanpa menjejaskan penampilan visual halaman. Ini membolehkan height() dan width() memberikan ukuran yang tepat walaupun untuk elemen tersembunyi, dengan syarat ibu bapa mereka boleh dilihat.

Mekanisme ini terbina dalam kaedah height() dan width() jQuery, menghapuskan keperluan untuk anda untuk memanipulasi keterlihatan elemen secara manual.

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