javascriptObtenir des compétences nirvana_javascript en matière de style d'élément

Méthodes Javascript pour obtenir les valeurs des attributs CSS : getComputedStyle et currentStyle

1 Pour le style CSS en ligne de l'élément (

hello

) , vous pouvez utiliser directement element.style.color pour obtenir directement la valeur de l'attribut css

2. Cependant, les styles CSS définis en externe ne peuvent pas être obtenus à l'aide de cette méthode, et IE et d'autres navigateurs standard (Firefox , Chrome, Opera, Safari) utilisent des méthodes différentes. Le navigateur IE utilise element.currentStyle et le navigateur standard du W3C utilise getComputedStyle pour l'obtenir.

1. IE obtient la valeur de l'attribut CSS défini en dehors de l'élément : element.currentStyle

L'objet currentStyle renvoie la feuille de style sur l'élément, mais l'objet style ne renvoie que la feuille de style 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 style.

Par exemple, si la valeur de l'attribut color d'un paragraphe est définie sur rouge ( red ) via une feuille de style liée ou intégrée, plutôt qu'en ligne, l'objet .currentStyle.color renverra la couleur correcte, tandis que l'objet style.color ne renverra pas de valeur. Cependant, si l'utilisateur spécifie

, les objets currentStyle et STYLE renverront la valeur rouge.
L'objet currentStyle reflète la priorité du style dans la feuille de style. En HTML, cet ordre est :

1) Styles en ligne

2) Règles de feuille de style

3) Attributs des balises HTML

4) Balises HTML La définition interne de

2. Le W3C obtient la valeur de l'attribut CSS définie en externe par l'élément : window.getComputedStyle(element, pseudoElt)
l'élément est requis, l'élément HTML
pseudoElt est requis et obtient le pseudoElt de l'élément.Class Style

Copier le code Le code est le suivant :

function getStyle(node , propriété){
if (node.style[property]) {
return node.style[property];
}
else if (node.currentStyle) {
return node.currentStyle [propriété];
}
else if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle(node, null
return style.getPropertyValue(); propriété);
}
return null
}