Méthode JavaScript pour obtenir la valeur d'attribut CSS: GetCompuledStyle et CurrentStyle
1. Pour le style CSS en ligne de l'élément (<div style = "Color: # 369"> Bonjour </div>), vous pouvez utiliser directement élément.style.color pour obtenir directement la valeur de l'attribut CSS;
2. Cependant, il est impossible d'obtenir les styles CSS définis à l'extérieur. De plus, les méthodes utilisées par le navigateur IE sont différentes des autres navigateurs standard (Firefox, Chrome, Opera, Safari). IE Browser utilise Element.CurrentStyle, et le navigateur standard W3C utilise GetCompuledStyle à obtenir.
1. IE obtient la valeur d'attribut CSS définie à l'extérieur dans l'élément: élément.currentStyle
L'objet CurrentStyle renvoie la feuille de style sur l'élément, mais l'objet de style renvoie uniquement le style intégré appliqué à l'élément via l'attribut de balise de style.
Par conséquent, la valeur de style obtenue via l'objet CurrentStyle peut être différente de la valeur de style obtenue via l'objet de style.
Par exemple, si la valeur de la propriété de couleur du paragraphe est définie sur rouge (rouge) via un lien ou une feuille de style intégrée au lieu d'être incorporée, l'objet .currentStyle.color renverra la couleur correcte et le style d'objet ne peut pas renvoyer la valeur. Cependant, si l'utilisateur spécifie <p style = "Color: 'Red'">, les objets CurrentStyle et Style renvoient la valeur rouge.
L'objet CurrentStyle reflète la priorité de style dans la feuille de style. Dans HTML, cette commande est:
1) Style en ligne
2) Règles de feuille de style
3) Attributs de balises HTML
4) Définition interne des balises HTML
2. W3C obtient la valeur d'attribut CSS définie à l'extérieur: Window.getCompuledStyle (élément, pseudoelt)
Élément requis, élément html
Pseudoelt est nécessaire pour obtenir le style pseudo-classe de l'élément
La copie de code est la suivante:
fonction getStyle (nœud, propriété) {
if (node.style [propriété]) {
return node.style [propriété];
}
else if (node.currentStyle) {
return node.currentStyle [propriété];
}
else if (document.defaultView && document.defaultView.getCompuledStyle) {
var style = document.defaultView.getCompuledStyle (nœud, null);
return style.getPropertyValue (propriété);
}
retourner null;
}