Bagaimanakah Saya Mendapatkan Lebar dan Ketinggian Sebenar Elemen HTML?

Menentukan Lebar dan Tinggi Sebenar Elemen HTML

Untuk memusatkan elemen HTML dalam ruang pandang penyemak imbas, adalah perlu untuk mengira dengan tepat dimensinya. Begini cara untuk mendapatkan semula lebar dan ketinggian sebenar sesuatu elemen dengan cekap.

Menggunakan Sifat Elemen

Sifat .offsetWidth dan .offsetHeight antara muka HTMLElement mewakili lebar sebenar dan ketinggian unsur, masing-masing. Ambil perhatian bahawa sifat ini adalah sebahagian daripada elemen, bukan objek .stylenya.

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

Menggunakan getBoundingClientRect()

Sebagai alternatif, kaedah getBoundingClientRect() boleh digunakan untuk mendapatkan dimensi dan lokasi elemen dalam port pandang sebagai nombor titik terapung. Ini termasuk kedudukan, lebar dan ketinggian elemen selepas menggunakan transformasi CSS.

console.log(document.getElementById('foo').getBoundingClientRect());

// Output:
// DOMRect {
//   ...
//   width: 631,  // Element's width in pixels
//   height: 54.7, // Element's height in pixels
//   ...
// }

Sokongan Penyemak Imbas

Kedua-dua teknik disokong dalam penyemak imbas moden, termasuk:

• Chrome
• Firefox
• Edge
• Safari
• Opera

Atas ialah kandungan terperinci Bagaimanakah Saya Mendapatkan Lebar dan Ketinggian Sebenar Elemen HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!