Comment récupérer les valeurs de style d'élément HTML en JavaScript dans les navigateurs ?-js tutoriel-php.cn

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

Linda Hamilton

Libérer： 2024-11-30 05:50:09

original

801 Les gens l'ont consulté

How to Retrieve HTML Element Style Values in JavaScript Across Browsers?

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>

Copier après la connexion

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

Copier après la connexion

2. Spécifique à IE :

element.currentStyle[propertyName];

Copier après la connexion

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

Copier après la connexion

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!