Bagaimanakah Saya Boleh Mendapatkan Dimensi Elemen HTML dengan Tepat?

Mengambil semula Dimensi Elemen HTML

Menentukan dimensi elemen HTML dengan tepat adalah penting untuk tugas seperti kedudukan elemen dan reka letak kandungan. Artikel ini meneroka kaedah yang berbeza untuk mendapatkan semula lebar dan ketinggian sebenar elemen tertentu.

Kaedah 1: Element.offsetWidth dan Element.offsetHeight

Sifat ini menyediakan elemen untuk lebar dan ketinggian piksel, termasuk pelapik dan sempadan, tetapi tidak termasuk jidar. Ia disokong oleh semua penyemak imbas utama.

var divElement = document.getElementById('myDiv');
var width = divElement.offsetWidth;
var height = divElement.offsetHeight;

Kaedah 2: getBoundingClientRect()

Kaedah ini mengembalikan objek yang mengandungi pelbagai dimensi dan maklumat lokasi tentang elemen tersebut. Khususnya, sifat lebar dan ketinggian mewakili saiz elemen selepas transformasi CSS digunakan.

var divElement = document.getElementById('myDiv');
var boundingRect = divElement.getBoundingClientRect();
var width = boundingRect.width;
var height = boundingRect.height;

Kaedah 3: offsetParent

Walaupun kurang tepat berbanding sebelumnya kaedah, offsetParent boleh digunakan untuk menentukan kedudukan elemen berbanding induknya. Dengan mengira secara rekursif lebar dan tinggi mengimbangi, adalah mungkin untuk menganggarkan dimensi sebenar elemen. Walau bagaimanapun, kaedah ini tidak disokong oleh semua penyemak imbas.

function getOffsetDimensions(element) {
  var width = element.offsetWidth;
  var height = element.offsetHeight;
  var parent = element.offsetParent;
  while (parent) {
    width += parent.offsetWidth;
    height += parent.offsetHeight;
    parent = parent.offsetParent;
  }
  return { width: width, height: height };
}

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