Bagaimana untuk Mendapatkan Lebar dan Ketinggian yang Tepat bagi Elemen HTML yang Diubah dalam JavaScript?

Menentukan Lebar dan Ketinggian selepas Transformasi

Apabila menggunakan transformasi seperti putaran pada elemen HTML, kaedah lalai JavaScript mungkin tidak mendapatkan semula yang diubah dengan tepat lebar dan tinggi.

Masalah:

Selepas menggunakan transformasi putaran (cth., putar(45deg)), elemen mungkin kelihatan mempunyai dimensi yang berbeza (cth., a segi empat sama kelihatan sebagai segi empat tepat). Walau bagaimanapun, sifat JavaScript seperti lebar dan tinggi masih mengembalikan nilai asal yang tidak diubah.

Penyelesaian:

Untuk mendapatkan semula dimensi sebenar selepas transformasi, gunakan kaedah getBoundingClientRect() pada HTMLDOMElement.

<code class="javascript">const element = document.getElementById('element');

// Apply the transformation
element.style.transform = 'rotate(45deg)';

// Get the transformed dimensions
const dimensions = element.getBoundingClientRect();

console.log('Transformed Width:', dimensions.width);
console.log('Transformed Height:', dimensions.height);</code>

Kaedah ini mengembalikan objek yang mengandungi dimensi elemen selepas mengambil kira matriks transformasi.

Contoh:

A Petak 11x11 selepas putaran 45 darjah menjadi segi empat tepat 17x17 dalam Chrome. Kaedah getBoundingClientRect() melaporkan dengan tepat dimensi 17x17, manakala sifat lebar dan ketinggian asal masih mengembalikan 11x11.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Lebar dan Ketinggian yang Tepat bagi Elemen HTML yang Diubah dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!