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

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 :

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

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.

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!