Comment puis-je récupérer les valeurs de style calculées pour les éléments HTML dans différents navigateurs en JavaScript ?

Extraction des valeurs de style d'élément HTML en Javascript

Pour acquérir les attributs de style attribués via CSS en ligne ou des balises de style, il est nécessaire de récupérer le style calculé plutôt que la propriété de style de l'élément seule. Cela implique l'utilisation de méthodes compatibles avec plusieurs navigateurs telles que document.defaultView.getComputedStyle et element.currentStyle.

Compatibilité entre navigateurs

Internet Explorer utilise element.currentStyle tandis que d'autres navigateurs adhérez à la méthode standard document.defaultView.getComputedStyle. Notez que IE attend les noms de propriétés CSS au format camelCase, alors que le format standard utilise des tirets.

Conversion d'unités sur IE

IE renvoie les tailles dans les unités d'origine, tandis que le format standard La méthode convertit toujours en pixels. La fonction getStyle fournie en tient compte en convertissant les unités sur IE si nécessaire.

Format de couleur

La méthode standard renvoie les valeurs de couleur en notation RVB, alors qu'IE les affiche sous forme défini. La fonction getStyle peut ne pas gérer parfaitement tous les cas, en particulier pour les formats de couleur.

Fonction personnalisée pour la récupération de style calculée

La fonction getStyle suivante fournit une approche multi-navigateurs pour récupération des styles calculés :

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels on IE
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return (function(value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

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!