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

Memahami offsetWidth, clientWidth, scrollWidth dan -Height

Memahami perbezaan antara offsetWidth, clientWidth, scrollWidth dan rakan ketinggian mereka boleh mencabar. Artikel ini bertujuan untuk memberikan penjelasan menyeluruh tentang sifat ini, lengkap dengan pembayang visual dan menunjukkan cara ia boleh digunakan untuk mengira lebar bar skrol.

Model Kotak CSS dan Sifat DOM

CSS model kotak, yang mentakrifkan dimensi elemen pada halaman web, boleh menjadi rumit, terutamanya apabila berurusan dengan kandungan menatal. Untuk memudahkan proses menentukan dimensi elemen menggunakan JavaScript, setiap elemen mempunyai enam sifat DOM:

• offsetWidth, offsetHeight: Termasuk semua sempadan dan lebar/tinggi elemen.
• clientWidth, clientHeight: Mewakili bahagian kandungan kotak yang boleh dilihat, tidak termasuk sempadan dan bar tatal tetapi termasuk pelapik.
• Lebar tatal, tatalTinggi: Menandakan saiz keseluruhan kandungan kotak, termasuk bahagian yang tersembunyi di luar kawasan tatal .

Perwakilan Visual

[Imej Model Kotak CSS2]

Mengira Lebar Bar Tatal

Sifat offsetWidth, yang menggabungkan lebar bar skrol, boleh digunakan untuk menentukan lebar bar skrol menggunakan formula berikut:

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

Walau bagaimanapun, ralat pembundaran mungkin berlaku kerana offsetWidth dan clientWidth sentiasa integer, manakala saiz sebenar mungkin mempunyai nilai pecahan.

Pengiraan Lebar Bar Tatal Alternatif (Chrome)

Dalam Chrome, lebar bar tatal boleh dikira menggunakan formula berikut:

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

Walau bagaimanapun, formula ini mungkin tidak berfungsi dengan pasti dalam penyemak imbas lain disebabkan oleh perbezaan dalam cara pelapisan dan bar skrol dipaparkan.

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