Comment obtenir une largeur et une hauteur précises des éléments HTML transformés en JavaScript ?

Détermination de la largeur et de la hauteur après transformation

Lors de l'application de transformations telles que la rotation à un élément HTML, les méthodes par défaut de JavaScript peuvent ne pas récupérer avec précision l'élément transformé. largeur et hauteur.

Problème :

Après avoir appliqué une transformation de rotation (par exemple, rotate(45deg)), l'élément peut sembler avoir des dimensions différentes (par exemple, un le carré apparaît comme un rectangle). Cependant, les propriétés JavaScript telles que la largeur et la hauteur renvoient toujours les valeurs d'origine non transformées.

Solution :

Pour récupérer les vraies dimensions après transformation, utilisez la méthode getBoundingClientRect() sur le 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>

Cette méthode renvoie un objet contenant les dimensions de l'élément après prise en compte de la matrice de transformation.

Exemple :

A Le carré 11x11 après une rotation de 45 degrés devient un rectangle 17x17 dans Chrome. La méthode getBoundingClientRect() rapporte avec précision les dimensions 17x17, tandis que les propriétés de largeur et de hauteur d'origine renvoient toujours 11x11.

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!