Récupération des valeurs de style d'élément HTML en JavaScript En JavaScript, obtenir le style en ligne d'un élément est simple. Cependant, l'accès aux styles définis via l'option La balise nécessite une approche légèrement différente.</p> <p>Pour récupérer les valeurs de style calculées, JavaScript fournit la méthode getComputedStyle, accessible via l'objet document.defaultView. Cette méthode standardise la récupération de style entre navigateurs et présente les valeurs converties en unités de pixels. Voici comment l'utiliser :</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>let element = document.getElementById("box"); let width = getComputedStyle(element).getPropertyValue("width");</pre><div class="contentsignin">Copier après la connexion</div></div> <p>Pour les navigateurs plus anciens comme Internet Explorer, une approche différente est nécessaire. IE prend en charge la propriété element.currentStyle, qui attend les noms de propriété de style au format camelCase et renvoie les valeurs dans leurs unités d'origine :</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>let width = element.currentStyle.width;</pre><div class="contentsignin">Copier après la connexion</div></div> <p>Pour garantir la compatibilité entre navigateurs, vous pouvez utiliser une fonction d'assistance comme la suivante : </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function getStyle(element, styleProp) { let value; if (document.defaultView && document.defaultView.getComputedStyle) { styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase(); value = getComputedStyle(element).getPropertyValue(styleProp); } else if (element.currentStyle) { styleProp = styleProp.replace(/\-(\w)/g, str => str[1].toUpperCase()); value = element.currentStyle[styleProp]; if (/^\d+(em|pt|%|ex)?$/i.test(value)) { return convertPixelValue(value); } else { return value; } } return value; }</pre><div class="contentsignin">Copier après la connexion</div></div> <p>Cette fonction gère les différences entre les navigateurs, en convertissant les propriétés héritées d'IE et les formats d'unité pour correspondre à la norme. Avec cette assistante, vous pouvez obtenir des valeurs de style calculées de manière cohérente sur tous les navigateurs.</p>
