Wie erhalte ich die genaue Breite und Höhe eines transformierten Elements in JavaScript?-CSS-Tutorial-php.cn

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

Susan Sarandon

Freigeben： 2024-10-28 03:27:30

Original

850 Leute haben es durchsucht

How to Get the Accurate Width and Height of a Transformed Element 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>

Nach dem Login kopieren

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!