Maison > interface Web > js tutoriel > Comment obtenir les valeurs de style d'un élément HTML dans différents navigateurs ?

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

DDD
Libérer: 2024-12-01 07:19:14
original
973 Les gens l'ont consulté

How to Get an HTML Element's Style Values Across Different Browsers?

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;
  }
}
Copier après la connexion

Utilisation

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

var element = document.getElementById("box");
var width = getStyle(element, "width");
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal