Bagaimana untuk Mendapatkan Dimensi Tepat Elemen Diputar dalam JavaScript?

Menentukan Dimensi Elemen Selepas Putaran

Masalah: Selepas menggunakan transformasi seperti transformasi: putar(45deg);, mendapatkan sifat lebar dan ketinggian yang tepat untuk elemen yang diputar boleh mencabar. Pendekatan konvensional mungkin masih melaporkan dimensi asal dan bukannya dimensi berubah sebenar.

Penyelesaian: Untuk mendapatkan semula lebar dan tinggi yang diubah, manfaatkan getBoundingClientRect() HTMLDOMElement. Kaedah ini mengembalikan objek yang mengandungi sifat penting bagi kotak yang diberikan elemen, termasuk ketinggian dan lebar sebenar, tanpa mengira transformasi yang digunakan.

Contoh Pelaksanaan:

Pertimbangkan perkara berikut HTML dan JavaScript:

<code class="html"><div id="my-div" style="width: 10px; height: 10px;">
</div></code>

<code class="javascript">const div = document.getElementById('my-div');
div.style.transform = 'rotate(45deg)';

const rect = div.getBoundingClientRect();

console.log(`Rotated dimensions: ${rect.width} x ${rect.height}`);</code>

Coretan kod ini mendapatkan semula dimensi diputar bagi elemen seperti yang dilaporkan oleh kaedah getBoundingClientRect(). Dalam kes ini, output ialah 17 x 17, mencerminkan lebar dan ketinggian sebenar petak yang diputar.

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