Maison >interface Web >js tutoriel >Utiliser JavaScript natif pour obtenir le style de l'élément, c'est simplement acquérir des compétences it_javascript

Utiliser JavaScript natif pour obtenir le style de l'élément, c'est simplement acquérir des compétences it_javascript

WBOY
WBOYoriginal
2016-05-16 16:34:421097parcourir

ps : Il s'agit d'obtenir le style, pas de définir le style. Si aucune valeur de style n'est définie pour l'élément, la valeur par défaut donnée par le navigateur est renvoyée. (Compilation du forum)

1. element.style : Vous ne pouvez obtenir que la valeur de style écrite dans l'attribut style de la balise element. Vous ne pouvez pas obtenir la valeur de style définie dans "css.css ”>Attributs de style chargés

Copier le code Le code est le suivant :

var ele = document.getElementById('ele');
ele.style.color; //Obtenir la couleur

2. window.getComputedStyle() : Vous pouvez obtenir toutes les valeurs finales des attributs CSS de l'élément actuel.

Copier le code Le code est le suivant :

window.getComputedStyle("element", "pseudo-classe");

Cette méthode accepte deux paramètres : l'élément à partir duquel obtenir le style calculé et une chaîne de pseudo-élément (telle que ":before"). Si les informations sur les pseudo-éléments ne sont pas requises, le deuxième paramètre peut être nul. peut également être utilisé via document.defaultView.getComputedStyle("element", "pseudo-class");

Copier le code Le code est le suivant :

var ele = document.getElementById('ele');
var styles = window.getComputedStyle(ele,null);
styles.color; //Obtenir la couleur

Vous pouvez afficher le nombre de styles par défaut du navigateur via style.length. IE6-8 ne prend pas en charge cette méthode et vous devez utiliser la méthode la plus récente. Pour Firefox et Safari, les couleurs seront converties au format RVB.

3. element.currentStyle : spécifique à IE, renvoie la valeur finale de l'attribut CSS actuellement appliquée à l'élément (y compris les fichiers CSS de lien externe, les attributs