Wie erhalte ich die wahre Breite und Höhe eines gedrehten Elements in JavaScript?

Breite/Höhe nach Rotationstransformation abrufen

Wenn Sie mithilfe von CSS eine Rotationstransformation auf ein Element anwenden, kann sich das visuelle Erscheinungsbild des Elements ändern. aber die JavaScript-Eigenschaften für seine Breite und Höhe spiegeln diese Änderung möglicherweise nicht wider.

Problem:

Nach der Anwendung einer Rotationstransformation von 45 Grad erscheint ein 11x11-Quadrat 17x17 im Browser. Wenn Sie jedoch versuchen, die Breiten- und Höheneigenschaften mit JavaScript abzurufen, erhalten Sie immer noch die ursprünglichen Werte (10x10).

Lösung:

Um die Breite genau abzurufen und Höhe nach dem Anwenden einer Rotationstransformation können Sie die Methode getBoundingClientRect() des HTMLDOMElements verwenden. Diese Methode gibt unter Berücksichtigung der Transformationsmatrix ein Objekt mit der richtigen Höhe und Breite zurück.

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

const rect = element.getBoundingClientRect();

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

Dieser Ansatz liefert Ihnen das gewünschte Ergebnis (17x17), da getBoundingClientRect() die tatsächlichen visuellen Abmessungen von berücksichtigt das gedrehte Element, nicht nur die ursprünglichen Werte, die in den Eigenschaften des Elements gespeichert sind.

Das obige ist der detaillierte Inhalt vonWie erhalte ich die wahre Breite und Höhe eines gedrehten Elements in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!