Comment récupérer la largeur et la hauteur réelles d'un élément pivoté en JavaScript ?

Récupération de la largeur/hauteur après la transformation de rotation

Lorsque vous appliquez une transformation de rotation à un élément à l'aide de CSS, l'apparence visuelle de l'élément peut changer, mais les propriétés JavaScript pour sa largeur et sa hauteur peuvent ne pas refléter ce changement.

Problème :

Après avoir appliqué une transformation de rotation de 45 degrés, un carré de 11x11 semble être 17x17 dans le navigateur. Cependant, si vous tentez de récupérer les propriétés de largeur et de hauteur à l'aide de JavaScript, vous obtenez toujours les valeurs d'origine (10x10).

Solution :

Pour récupérer avec précision la largeur et la hauteur après avoir appliqué une transformation de rotation, vous pouvez utiliser la méthode getBoundingClientRect() de HTMLDOMElement. Cette méthode renvoie un objet avec la hauteur et la largeur correctes, en tenant compte de la matrice de transformation.

<code class="javascript">const element = document.querySelector('.rotated-element');

const rect = element.getBoundingClientRect();

const width = rect.width;
const height = rect.height;</code>

Cette approche vous donne le résultat souhaité (17x17) car getBoundingClientRect() prend en compte les dimensions visuelles réelles de l'élément pivoté, pas seulement les valeurs d'origine stockées dans les propriétés de l'élément.

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!