Bagaimana untuk Menentukan Dimensi Elemen HTML dengan Tepat?

Menentukan Dimensi Sebenar Elemen HTML

Apabila cuba menjajarkan elemen HTML dalam ruang pandang penyemak imbas, adalah penting untuk mendapatkannya dengan tepat lebar dan tinggi sebenar. Ini memerlukan memanfaatkan sifat dan fungsi tertentu yang disokong oleh pelbagai penyemak imbas.

.offsetWidth dan .offsetHeight

Untuk menentukan lebar dan tinggi elemen tanpa mengambil kira perubahan CSS, gunakan sifat .offsetWidth dan .offsetHeight. Sifat ini boleh diakses terus pada elemen, tidak seperti .style.

var width = document.getElementById('foo').offsetWidth;

getBoundingClientRect()

Fungsi .getBoundingClientRect() menyediakan bacaan yang lebih tepat bagi sesuatu dimensi dan lokasi elemen selepas transformasi CSS telah digunakan. Ia mengembalikan nombor titik terapung yang menunjukkan atribut berikut:

console.log(document.getElementById('foo').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

Sokongan Penyemak Imbas

Property/Function	Browser Support
.offsetWidth/.offsetHeight	All major browsers
getBoundingClientRect()	All major browsers except Internet Explorer 8 and below

Atas ialah kandungan terperinci Bagaimana untuk Menentukan Dimensi Elemen HTML dengan Tepat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!