Apakah Perbezaan Antara `offsetWidth`, `clientWidth` dan `scrollWidth` (dan Counterparts Ketinggian Mereka)?

Memahami offsetWidth, clientWidth, scrollWidth dan Counterparts Ketinggian Mereka

Walaupun terdapat banyak pertanyaan mengenai StackOverflow dan memahami maklumat dalam talian yang mengelirukan atau tidak tepat daripada offsetWidth, clientWidth, scrollWidth, dan rakan ketinggian mereka kekal sebagai cabaran.

Definisi dan Bantuan Visual:

• offsetWidth, offsetHeight: Mewakili lebar dan ketinggian kotak visual elemen, termasuk sempadan. Boleh dikira dengan menjumlahkan lebar/tinggi, padding dan jidar (untuk elemen dengan paparan: blok).
• clientWidth, clientHeight: Nyatakan bahagian kandungan yang boleh dilihat dalam elemen, tidak termasuk sempadan dan bar skrol, tetapi termasuk pelapik. Tidak boleh diperoleh secara langsung daripada CSS dan berbeza-beza berdasarkan saiz bar skrol sistem.
• Lebar skrol, scrollHeight: Nyatakan jumlah saiz kandungan elemen, termasuk bahagian tersembunyi di luar kawasan skrol. Juga bergantung pada kandungan dan tidak boleh dikira terus daripada CSS.

[Visual Model Kotak CSS2 dengan dimensi berlabel]

Mengira Lebar Bar Skrol:

Oleh kerana offsetWidth termasuk lebar bar skrol, kami boleh mengiranya menggunakan formula:

scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth

Walau bagaimanapun, kaedah ini mungkin menghasilkan ralat pembundaran disebabkan sifat integer bagi OffsetWidth dan clientWidth, yang mungkin tidak mencerminkan dimensi pecahan sebenar pada tahap zum selain 1.

Pertimbangan Tambahan:

Perhatikan bahawa perkara berikut formula:

scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidth

tidak memberikan hasil yang boleh dipercayai dalam Chrome, kerana Chrome menolak lebar bar skrol daripada lebar yang dilaporkan. Selain itu, Chrome memaparkan paddingBottom ke bahagian bawah kandungan skrol, tidak seperti penyemak imbas lain.

Atas ialah kandungan terperinci Apakah Perbezaan Antara `offsetWidth`, `clientWidth` dan `scrollWidth` (dan Counterparts Ketinggian Mereka)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!