Moyen facile d'obtenir des styles d'élément dans JS natif

Au cours du processus de développement, nous rencontrons souvent le style des éléments DOM via JS. Il existe de nombreuses méthodes, telles que: en modifiant la classe des éléments DOM. Maintenant, nous discutons de JS natif pour obtenir le style CSS des éléments DOM, notez que ce n'est pas un paramètre

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

1.Ele.

Lors de l'apprentissage de DOM, je vois que les valeurs de style d'élément sont obtenues via Ele.style, mais parfois ce que je reçois n'est pas les valeurs de style du nœud, mais la valeur vide. En effet, Ele.Style ne peut que faire écrire la valeur de style dans l'attribut de style dans la balise d'élément, et ne peut pas obtenir les attributs de style définis dans <style> </ style> et chargés via <link href = "csss.css">

exemple:

 var test = document.getElementById ("test"); // Obtenez le test de couleur.style.color du nœud;

2. GetCompuledStyle ()

GetCompuledStyle est une valeur d'attribut CSS qui peut obtenir toutes les valeurs d'attribut CSS utilisées par les fins de l'élément actuel.

La syntaxe est la suivante:

 window.getCompuledStyle ("élément", "pseudo-classe");

Cette méthode accepte deux paramètres: pour obtenir l'élément du style calculé et une chaîne pseudo-élémentaire (par exemple ": avant"). Si des informations pseudo-éléments ne sont pas requises, le deuxième paramètre peut être nul. Il peut également être utilisé via document.defaultView.getCompuledStyle ("élément", "pseudo-classe");

exemple:

 var test = document.getElementById ("test"), démo = window.getCompuledStyle (test, null); // Obtenez la démonstration de couleur .color du nœud

Remarque: Firefox et Safari convertiront les couleurs au format RVB. S'il n'y a pas de style sur le nœud de test, utilisez Style.Length pour afficher le nombre de styles par défaut du navigateur. IE6-8 ne prend pas en charge cette méthode, la méthode suivante est requise

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 d'attribut CSS finale de l'élément actuellement appliqué (y compris le fichier CSS de liaison externe, l'attribut <style> intégré dans la page, etc.).

grammaire:

 var style = dom.currentStyle;

exemple:

 var test = document.getElementById ("test"), démo = test.currentStyle; // obtient la Demo Color.Color du nœud;

Remarque: Pour une frontière d'attribut complète, etc., c'est-à-dire des renvoie non définis. Certains autres navigateurs renvoient les valeurs et d'autres ne reviennent pas, mais les attributs comme BorderLeftWidth Return Values.

4. GetPropertyValue ()

GetPropertyValue obtient le nom de la propriété directe du style CSS

La syntaxe est la suivante:

 window.getCompuledStyle (élément, null) .getPropertyValue (propriété)

exemple:

 var test = document.getElementById ('test'); window.getCompuledStyle (test, null) .getProperTyValue ("background-Color");

Remarque: Le nom d'attribut ne prend pas en charge le format de chameau, IE6-8 ne prend pas en charge cette méthode, donc la méthode suivante est requise

5. GetAttribute

GetAttribute est similaire à GetPropertyValue, une différence est le format de chameau du nom de la propriété

exemple:

 var test = document.getElementById ('test'); window.getCompuledStyle (test, null) .getPropertyValue ("backgroundColor");

Remarque : cette méthode ne prend en charge que IE6-8

résumé:

La méthode jQuery CSS (), l'opération sous-jacente utilise les méthodes GetComputedStyle et GetProperTyValue. Lorsque nous utilisons le développement JS natif, nous pouvons obtenir la valeur de l'élément à travers les méthodes ci-dessus.

Ce qui suit est une méthode compatible avec IE, Firefox, Chrome et d'autres navigateurs pour obtenir des styles d'élément, qui peuvent être appliqués au projet

 fonction getStyle (ele) {var style = null; if (window.getCompupedStyle) {style = window.getCompuledStyle (ele, null); } else {style = ele.currentStyle; } style de retour;}

Le moyen simple ci-dessus d'obtenir des styles d'élément dans JS natif est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.