Le javascript natif acquiert les compétences de l'élément style_javascript

Résumé :
Au cours du processus de développement, nous rencontrons souvent l'obtention ou la modification du style des éléments DOM via js. Il existe de nombreuses méthodes, telles que la modification de la classe des éléments DOM. Nous discutons maintenant du js natif pour obtenir le style CSS des éléments DOM. Notez qu'il s'agit d'obtenir et non de définir

.

Avant de commencer, parlons de la signification d'obtenir tous les objets d'attribut CSS qui sont finalement appliqués à l'élément. Si aucun style n'est défini pour l'élément, le style par défaut du navigateur sera également renvoyé.

1.ele.style
Quand j'apprenais DOM, j'ai vu que la valeur de style de l'élément était obtenue via ele.style, mais parfois ce qui était obtenu n'était pas la valeur de style du nœud, mais une valeur nulle. En effet, ele.style ne peut obtenir que la valeur de style écrite dans l'attribut style de la balise element et ne peut pas obtenir la valeur de style définie dans et via Attributs de style chargés

Exemple :

Copier le code Le code est le suivant :

         var test = document.getElementById("test");
//Obtenir la couleur du nœud
         test.style.color;

2.getComputedStyle()
GetComputedStyle est une méthode qui peut obtenir toutes les valeurs finales des attributs CSS de l'élément actuel.

La syntaxe est la suivante :

window.getComputedStyle("Element", "Pseudo-class");

Cette méthode accepte deux paramètres : l'élément pour obtenir le style calculé et une chaîne de pseudo-élément (comme ":before"). Si les informations sur les pseudo-éléments ne sont pas requises, le deuxième paramètre peut être nul. Vous pouvez également utiliser document.defaultView.getComputedStyle("Element", "Pseudo-class");

Exemple :

Copier le code Le code est le suivant :

         var test = document.getElementById("test"),
          demo = window.getComputedStyle(test, null
); //Obtenir la couleur du nœud
démo.color

Remarque : Firefox et Safari convertiront la couleur au format RVB. S'il n'y a pas de style sur le nœud de test, utilisez style.length pour vérifier le nombre de styles par défaut du navigateur. IE6-8 ne prend pas en charge cette méthode, vous devez utiliser la méthode suivante

3. ele.currentStyle
currentStyle est un attribut du navigateur IE lui-même. Sa syntaxe est similaire à ele.style. La différence est que element.currentStyle renvoie la valeur finale de l'attribut CSS actuellement appliquée à l'élément (y compris les fichiers CSS de lien externe et l'attribut