Comment récupérer les valeurs de style d'élément HTML en JavaScript sur différents navigateurs ?

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.

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 :

let element = document.getElementById("box"); let width = getComputedStyle(element).getPropertyValue("width"); 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 :

let width = element.currentStyle.width; Pour garantir la compatibilité entre navigateurs, vous pouvez utiliser une fonction d'assistance comme la suivante :