Comment obtenir les valeurs de style d'un élément HTML dans différents navigateurs ?

Comment récupérer les valeurs de style d'un élément HTML en JavaScript

La récupération des valeurs de style des éléments HTML est essentielle pour manipuler l'apparence des éléments de manière dynamique. Bien que la définition de styles à l'aide de JavaScript soit simple, l'accès aux styles définis dans les balises de style peut être délicat.

Considérations multi-navigateurs

L'accès aux styles d'éléments nécessite une approche multi-navigateur. Internet Explorer utilise sa propre propriété, currentStyle, tandis que d'autres navigateurs suivent la norme W3C et utilisent document.defaultView.getComputedStyle.

Fonction personnalisée entre navigateurs

Pour gérer les -incohérences du navigateur, une fonction personnalisée est souvent employé :

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    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;
  }
}

Utilisation

Pour récupérer la propriété de style d'un élément :

var element = document.getElementById("box");
var width = getStyle(element, "width");

Considérations actuelles

La fonction ci-dessus peut ne pas gérer tous les cas extrêmes, en particulier pour les couleurs où la valeur renvoyée peut différer entre IE et les autres. 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!