Maison >interface Web >tutoriel CSS >Comment récupérer la valeur de style CSS d'un élément HTML à l'aide de JavaScript pur ?
Comment récupérer la valeur de style CSS d'un élément HTML à l'aide de JavaScript pur ?
- Linda Hamiltonoriginal
- 2025-01-05 07:40:38831parcourir
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>
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"));
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 && 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;
}
}
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!