Wie erhalte ich die genaue Breite und Höhe transformierter HTML-Elemente in JavaScript?

Bestimmen von Breite und Höhe nach der Transformation

Beim Anwenden von Transformationen wie etwa einer Drehung auf ein HTML-Element rufen die Standardmethoden von JavaScript die transformierten Elemente möglicherweise nicht genau ab Breite und Höhe.

Problem:

Nach dem Anwenden einer Rotationstransformation (z. B. Drehen (45 Grad)) scheint das Element möglicherweise unterschiedliche Abmessungen zu haben (z. B. a Quadrat erscheint als Rechteck). Allerdings geben JavaScript-Eigenschaften wie Breite und Höhe weiterhin die ursprünglichen, nicht transformierten Werte zurück.

Lösung:

Um die wahren Abmessungen nach der Transformation abzurufen, verwenden Sie die Methode getBoundingClientRect() das HTMLDOMElement.

<code class="javascript">const element = document.getElementById('element');

// Apply the transformation
element.style.transform = 'rotate(45deg)';

// Get the transformed dimensions
const dimensions = element.getBoundingClientRect();

console.log('Transformed Width:', dimensions.width);
console.log('Transformed Height:', dimensions.height);</code>

Diese Methode gibt ein Objekt zurück, das die Abmessungen des Elements nach Berücksichtigung der Transformationsmatrix enthält.

Beispiel:

A Das 11x11-Quadrat wird nach einer 45-Grad-Drehung zu einem 17x17-Rechteck in Chrome. Die getBoundingClientRect()-Methode meldet die Abmessungen 17x17 genau, während die ursprünglichen Eigenschaften für Breite und Höhe immer noch 11x11 zurückgeben.

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