Wie erhalte ich die genaue Breite und Höhe eines transformierten Elements in JavaScript?

Abrufen von Breite und Höhe nach der Transformation

Beim Anwenden einer Transformation wie Drehen (45 Grad) auf ein Element werden die visuellen Abmessungen dieses Elements angezeigt ändern. Die Breiten- und Höheneigenschaften in JavaScript spiegeln jedoch immer noch die ursprünglichen, nicht transformierten Abmessungen wider.

Lösung: Verwenden von getBoundingClientRect()

Um die aktualisierten Abmessungen nach der Transformation zu erhalten, verwenden Sie die getBoundingClientRect()-Methode für das HTMLDOMElement. Diese Methode gibt ein Objekt zurück, das die transformierte Höhe und Breite enthält.

Beispiel:

<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>

Demo:

Visit Dieses jsFiddle für ein praktisches Beispiel: https://jsfiddle.net/your_url_here

Hinweis: Mit dieser Methode erhalten Sie die Abmessungen des gesamten Elements, einschließlich aller Ränder oder Polster. Wenn Sie nur die Inhaltsabmessungen berechnen müssen, sollten Sie offsetWidth und offsetHeight für das Inhaltselement des Elements verwenden (z. B.

innerhalb des transformierten Elements).

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