Bagaimana untuk Mendapatkan Lebar dan Ketinggian Sebenar Elemen Diputar dalam JavaScript?

Mengambil Lebar/Ketinggian Selepas Transformasi Putaran

Apabila anda menggunakan transformasi putaran pada elemen menggunakan CSS, penampilan visual elemen mungkin berubah, tetapi sifat JavaScript untuk lebar dan ketinggiannya mungkin tidak menggambarkan perubahan ini.

Masalah:

Selepas menggunakan transformasi putaran 45 darjah, segi empat sama 11x11 nampaknya 17x17 dalam penyemak imbas. Walau bagaimanapun, jika anda cuba mendapatkan semula sifat lebar dan ketinggian menggunakan JavaScript, anda masih mendapat nilai asal (10x10).

Penyelesaian:

Untuk mendapatkan semula lebar dengan tepat dan ketinggian selepas menggunakan transformasi putaran, anda boleh menggunakan kaedah getBoundingClientRect() HTMLDOMElement. Kaedah ini mengembalikan objek dengan ketinggian dan lebar yang betul, dengan mengambil kira matriks transformasi.

<code class="javascript">const element = document.querySelector('.rotated-element');

const rect = element.getBoundingClientRect();

const width = rect.width;
const height = rect.height;</code>

Pendekatan ini memberikan anda hasil yang diingini (17x17) kerana getBoundingClientRect() mengambil kira dimensi visual sebenar bagi elemen yang diputar, bukan hanya nilai asal yang disimpan dalam sifat elemen.

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