Comment obtenir les dimensions précises d'un élément pivoté en JavaScript ?

Détermination des dimensions d'un élément après rotation

Problème : Après avoir appliqué une transformation telle que transform: rotate(45deg);, obtention de propriétés de largeur et de hauteur précises car l’élément pivoté peut être un défi. Les approches conventionnelles peuvent toujours signaler les dimensions d'origine au lieu des dimensions transformées réelles.

Solution : Pour récupérer la largeur et la hauteur transformées, utilisez getBoundingClientRect() de HTMLDOMElement. Cette méthode renvoie un objet contenant les propriétés essentielles de la boîte de rendu de l'élément, y compris sa hauteur et sa largeur réelles, quelles que soient les transformations appliquées.

Exemple d'implémentation :

Considérez ce qui suit HTML et JavaScript :

<code class="html"><div id="my-div" style="width: 10px; height: 10px;">
</div></code>

<code class="javascript">const div = document.getElementById('my-div');
div.style.transform = 'rotate(45deg)';

const rect = div.getBoundingClientRect();

console.log(`Rotated dimensions: ${rect.width} x ${rect.height}`);</code>

Cet extrait de code récupère les dimensions pivotées de l'élément telles que rapportées par la méthode getBoundingClientRect(). Dans ce cas, le résultat serait de 17 x 17, reflétant la largeur et la hauteur réelles du carré pivoté.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!