Comment récupérer les valeurs de style des éléments HTML à l'aide de JavaScript pur ?

Récupération des valeurs de style d'un élément HTML à l'aide de JavaScript

L'obtention des attributs de style d'un élément HTML est essentielle pour manipuler son apparence de manière dynamique. Cet article explore les nuances de la récupération des valeurs de style à l'aide de JavaScript pur, sans l'aide d'aucune bibliothèque externe.

Style actuel et propriétés calculées

Pour accéder aux valeurs de style, nous devons faire la différence entre les styles en ligne (définis dans l'attribut style de l'élément) et les propriétés calculées (les styles réellement appliqués).

Internet Explorer utilise element.currentStyle propriété pour récupérer les styles en ligne, qui contiennent les valeurs dans leurs unités d'origine.

Mozilla et d'autres navigateurs modernes s'appuient sur la méthode document.defaultView.getComputedStyle pour fournir les propriétés calculées. Ces valeurs sont normalisées en pixels, fournissant une représentation cohérente entre les navigateurs.

Solution multi-navigateurs

La fonction suivante offre une solution multi-navigateurs pour récupérer à la fois en ligne et styles calculés :

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // Convert styleProp to compatible notation
  styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
  // Modern browsers: computed properties
  if (defaultView && defaultView.getComputedStyle) {
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE: inline properties
    // Convert styleProp to camelCase notation
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // Normalize units 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;
  }
}

Exemple

Pour récupérer la propriété de largeur en ligne d'un élément avec l'identifiant "box" (défini via une balise de style) :

alert (getStyle(document.getElementById("box"), "width"));

Pour récupérer la propriété de largeur calculée, qui prend en compte les styles en cascade ou hérités :

alert (getStyle(document.getElementById("box"), "width"));

Limitations

Cette fonction ne gère pas parfaitement les valeurs de couleur. Les navigateurs modernes renverront les couleurs dans la notation RVB, tandis qu'IE conservera leur définition originale.

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!