Bagaimana untuk Mendapatkan Lebar dan Ketinggian yang Tepat bagi Elemen yang Diubah dalam JavaScript?-tutorial css-php.cn

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

Susan Sarandon

Lepaskan： 2024-10-28 03:27:30

asal

851 orang telah melayarinya

How to Get the Accurate Width and Height of a Transformed Element in JavaScript?

Mendapatkan Lebar dan Ketinggian Selepas Transformasi

Apabila menggunakan transformasi seperti putar(45deg) pada elemen, dimensi visual elemen itu berubah. Walau bagaimanapun, sifat lebar dan ketinggian dalam JavaScript masih mencerminkan dimensi asal yang tidak diubah.

Penyelesaian: Menggunakan getBoundingClientRect()

Untuk mendapatkan dimensi yang dikemas kini selepas transformasi, gunakan kaedah getBoundingClientRect() pada HTMLDOMElement. Kaedah ini mengembalikan objek yang mengandungi ketinggian dan lebar yang diubah.

Contoh:

<code class="javascript">// Get the element
const element = document.querySelector('.transformed');

// Calculate the rotated dimensions
const rect = element.getBoundingClientRect();

// Access the rotated width and height
const rotatedWidth = rect.width;
const rotatedHeight = rect.height;</code>

Salin selepas log masuk

Demo:

Lawati jsFiddle ini untuk contoh praktikal: https://jsfiddle.net/your_url_here

Nota: Kaedah ini akan memberi anda dimensi keseluruhan elemen, termasuk sebarang jidar atau pelapik. Jika anda perlu mengira dimensi kandungan sahaja, anda harus menggunakan offsetWidth dan offsetHeight pada elemen kandungan elemen (cth.,

dalam elemen yang diubah).

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