Comment obtenir la largeur et la hauteur précises d'un élément transformé en JavaScript ?

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

Lors de l'application d'une transformation telle que rotation (45deg) à un élément, les dimensions visuelles de cet élément changement. Cependant, les propriétés width et height en JavaScript reflètent toujours les dimensions d'origine non transformées.

Solution : Utilisation de getBoundingClientRect()

Pour obtenir les dimensions mises à jour après transformation, utilisez le méthode getBoundingClientRect() sur HTMLDOMElement. Cette méthode renvoie un objet contenant la hauteur et la largeur transformées.

Exemple :

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

Démo :

Visitez ce jsFiddle pour un exemple pratique : https://jsfiddle.net/your_url_here

Remarque : Cette méthode vous donnera les dimensions de l'élément entier, y compris les bordures ou le remplissage. Si vous devez calculer uniquement les dimensions du contenu, vous devez utiliser offsetWidth et offsetHeight sur l'élément de contenu de l'élément (par exemple,

dans l'élément transformé).

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!

JavaScript Object if for using this padding transform https

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn