Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Menentukan Dimensi Elemen HTML dengan Tepat?

Bagaimanakah Saya Boleh Menentukan Dimensi Elemen HTML dengan Tepat?

Linda Hamilton
Linda Hamiltonasal
2024-12-07 05:54:13186semak imbas

How Can I Accurately Determine the Dimensions of an HTML Element?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn