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

Récupération des valeurs de style des éléments HTML en JavaScript

Pour les éléments dont les styles sont définis via la balise style, comme illustré ci-dessous :

<style>
#box {
  width: 100px;
}
</style>

<div>

Pour récupérer les valeurs de style à l'aide de JavaScript, la propriété element.style seule ne suffira pas, car elle fournit des styles en ligne ou définis par JavaScript.

Styles calculés

Nous devons accéder au style calculé de l'élément, qui représente le style réel appliqué à après avoir hérité des éléments parents et pris en compte les règles CSS appliquées. En JavaScript, nous pouvons obtenir des styles calculés en utilisant deux méthodes :

1. Norme DOM (autres navigateurs) :

document.defaultView.getComputedStyle(element, null).getPropertyValue(propertyName);

2. Spécifique à IE :

element.currentStyle[propertyName];

Cependant, IE utilise des noms de propriété camelCase (par exemple, "font-Size") et peut renvoyer des tailles en unités autres que les pixels, tandis que la méthode standard utilise des noms de propriété avec trait d'union ( par exemple, "font-size") et fournit toujours des valeurs en pixels.

Cross-Browser Solution

Pour récupérer les styles calculés de manière compatible avec tous les navigateurs, utilisez la fonction suivante :

function getStyle(element, property) {
  var value, defaultView = (element.ownerDocument || document).defaultView;
  // Sanitize property name for different browsers
  property = property.replace(/([A-Z])/g, "-").toLowerCase();

  if (defaultView && defaultView.getComputedStyle) {
    return defaultView.getComputedStyle(element, null).getPropertyValue(property);
  } else if (element.currentStyle) {
    // Convert camelCase property name to hyphenated
    property = property.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });

    value = element.currentStyle[property];
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
      return (function(value) {
        var oldLeft = element.style.left, oldRsLeft = element.runtimeStyle.left;
        element.runtimeStyle.left = element.currentStyle.left;
        element.style.left = value || 0;
        value = element.style.pixelLeft + "px";
        element.style.left = oldLeft;
        element.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!