Wie erhalte ich genaue Abmessungen eines gedrehten Elements in JavaScript?

Bestimmen der Elementabmessungen nach der Drehung

Problem: Nach dem Anwenden einer Transformation wie „transform: rotation(45deg);“ werden genaue Breiten- und Höheneigenschaften erhalten denn das gedrehte Element kann eine Herausforderung sein. Herkömmliche Ansätze melden möglicherweise immer noch die ursprünglichen Abmessungen anstelle der tatsächlich transformierten Abmessungen.

Lösung: Um die transformierte Breite und Höhe abzurufen, nutzen Sie getBoundingClientRect() des HTMLDOMElements. Diese Methode gibt ein Objekt zurück, das wesentliche Eigenschaften der gerenderten Box des Elements enthält, einschließlich seiner wahren Höhe und Breite, unabhängig von angewendeten Transformationen.

Beispielimplementierung:

Bedenken Sie Folgendes HTML und 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>

Dieses Code-Snippet ruft die gedrehten Abmessungen des Elements ab, wie von der Methode getBoundingClientRect() gemeldet. In diesem Fall wäre die Ausgabe 17 x 17, was die tatsächliche Breite und Höhe des gedrehten Quadrats widerspiegelt.

Das obige ist der detaillierte Inhalt vonWie erhalte ich genaue Abmessungen eines gedrehten Elements in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!