Bagaimanakah Saya Boleh Menentukan Dimensi Elemen HTML dengan Tepat?

Cara Mengira Dimensi Sebenar Elemen HTML

Menentukan lebar dan ketinggian tepat elemen HTML adalah penting untuk menjajarkannya dengan sewajarnya. Artikel ini meneroka pelbagai teknik untuk mendapatkan semula dimensi sebenar dan menyediakan butiran keserasian merentas penyemak imbas yang berbeza.

.offsetWidth dan .offsetHeight

Konsep: Sifat ini menunjukkan lebar dan ketinggian sesuatu elemen, termasuk pelapik dan sempadan.

Contoh:

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

Sokongan Penyemak Imbas: Semua pelayar utama

.getBoundingClientRect()

Konsep: Kaedah ini mengembalikan DOMRec objek yang mengandungi pelbagai dimensi dan koordinat, termasuk lebar dan tinggi selepas menggunakan transformasi CSS.

Contoh:

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

Output:

DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

Pelayar Sokongan:

• Pelayar Desktop: Chrome, Edge, Firefox, Safari
• Pelayar Mudah Alih: Chrome untuk Android, iOS Safari

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