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:

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

Demo:

Besuchen Sie diese 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 etwaiger Ränder oder Polsterungen. Wenn Sie nur die Inhaltsabmessungen berechnen müssen, sollten Sie offsetWidth und offsetHeight für das Inhaltselement des Elements verwenden (z. B.