Comment récupérer la valeur de style CSS d'un élément HTML à l'aide de JavaScript pur ?-tutoriel CSS-php.cn

Comment récupérer la valeur de style CSS d'un élément HTML à l'aide de JavaScript pur ?

Linda Hamilton

Libérer： 2025-01-05 07:40:38

original

870 Les gens l'ont consulté

How to Retrieve an HTML Element's CSS Style Value Using Pure JavaScript?

Accès aux valeurs de style des éléments HTML en JavaScript

On peut rencontrer le besoin de récupérer les styles d'un élément HTML qui a été défini dans le Feuille de style CSS. Par exemple, considérons le code HTML et CSS suivant :

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

Copier après la connexion

En utilisant uniquement du JavaScript pur sans aucune bibliothèque, comment pouvez-vous récupérer la valeur de la propriété width ? Les tentatives suivantes aboutissent souvent à la réception de valeurs vides :

alert(document.getElementById("box").style.width);
alert(document.getElementById("box").style.getPropertyValue("width"));

Copier après la connexion

Ces tentatives échouent car elles ne fonctionnent qu'avec les styles en ligne définis dans l'attribut style de l'élément. Pour récupérer les styles calculés, une approche différente est nécessaire.

Compatibilité entre navigateurs

L'accès aux styles calculés présente un défi en raison des différences entre les navigateurs. Internet Explorer utilise la propriété element.currentStyle, tandis que d'autres navigateurs suivent la norme DOM niveau 2 avec document.defaultView.getComputedStyle. De plus, IE gère différemment les noms de propriété contenant deux mots ou plus, en utilisant camelCase (par exemple, "maxHeight"). D'autres navigateurs s'attendent à ce que des tirets séparent les mots (par exemple, « hauteur maximale »).

Fonction multi-navigateurs

Pour résoudre ces différences entre navigateurs, la fonction suivante peuvent être utilisés :

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  if (defaultView &amp;&amp; defaultView.getComputedStyle) {
    styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) {
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    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;
  }
}

Copier après la connexion

Cette fonction offre une compatibilité entre navigateurs pour accéder aux styles calculés, en gérant à la fois les styles standard et Comportement spécifique à IE. Notez qu'il peut ne pas gérer tous les cas, tels que les couleurs, qui sont renvoyées différemment par différents 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!