Code de base:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> Document </Title> <style> div {Color: Yellow; } </ style> </ head> <body> <div> Ceci est div </div> </ body> </html>1. Obtenez-le en utilisant l'élément.
<script> var div = document.getElementsByTAGName ("div") [0]; console.log (div.style.color); // "" Console.log (div.style.backgroundColor); // rouge </cript>L'attribut élément.style ne peut obtenir que des styles en ligne, ne peut pas obtenir des styles dans la balise <ystyle>, ni d'obtenir des styles externes.
Puisque Element.Style est un attribut d'un élément, nous pouvons réaffecter l'attribut pour remplacer l'affichage de l'élément.
<script> var div = document.getElementsByTAGName ("div") [0]; div.style ['background-color'] = "vert"; console.log (div.style.backgroundcolor); // vert </cript>2. Obtenez des styles via GetCompuledStyle et CurrentStyle
L'environnement d'utilisation de GetCompupedStyle est Chrome / Safari / Firefox IE 9,10,11
<script> var div = document.getElementsByTAGName ("div") [0]; var styleObj = window.getCompuledStyle (div, null); console.log (styleobj.backgroundcolor); // Red Console.log (StyleObj.Color); // jaune </cript>CurrentStyle peut être parfaitement pris en charge dans IE, Chrome ne prend pas en charge, FF ne prend pas en charge
<script> var div = document.getElementsByTAGName ("div") [0]; var styleobj = div.currentStyle; console.log (styleobj.backgroundcolor); // Red Console.log (StyleObj.Color); // jaune </cript>3. La différence entre Ele.style et GetCompuledStyle ou Current Style
3.1ele.Style est en lecture-écriture, tandis que GetCompuledStyle et CurrentStyle sont en lecture seule
3.2 Ele.Style ne peut que le jeu de style CSS dans la propriété Style dans la ligne, et GetCompuledStyle et CurrentStyle peuvent également obtenir d'autres valeurs par défaut.
3.3 What ele.style obtient le style dans l'attribut de style, pas nécessairement le style final, tandis que les deux autres obtiennent le style CSS final de l'élément
4. Obtenez l'écriture de compatibilité du style
<Script> // Obtenez le style non linéaire (le style dans la balise de style ou le style dans le fichier CSS du lien), OBJ est l'élément, ARTM est la fonction de nom de style getStyle (obj, att) {// pour ie if (obj.currentStyle) {return obj.currentStyle [att]; // Parce que l'attrait passé par la fonction est une chaîne, vous devez utiliser [] pour obtenir la valeur} else {// pour la fenêtre de retour non ie.GetComputedStyle (obj, false) [att]; }} / * Obtenez ou définissez l'attribut CSS * / fonction css (obj, att, value) {if (arguments.length == 2) {return getStyle (obj, att); } else {obj.style [attr] = valeur; }} </ script>5.Window.getCompuledStyle (ele [, pseudoelt]);
Si le deuxième paramètre est nul ou omis, obtenez l'objet CSSStyledEclartation qui est ELE
S'il s'agit d'un pseudo-classe, l'objet CSSStyledEcloration de la pseudo-classe est obtenu
<style> div {largeur: 200px; hauteur: 200px; Color d'arrière-plan: # fc9; taille de police: 20px; Texte-aligne: Centre; } div: après {contenu: "c'est après"; Affichage: bloc; Largeur: 100px; hauteur: 100px; Color en arrière-plan: # F93; marge: 0 auto; hauteur de ligne: 50px; } </ style> <body> <div id = 'myDiv'> Ceci est div </ div> <input id = 'btn' type = "Button" value = 'getStyle' /> <script> var btn = document.QuerySelector ('# btn'); btn.onclick = function () {var div = document.QuerySelector ('# myDiv'); var styleObj = window.getCompuledStyle (div, 'after'); console.log (styleobj ['width']); } </cript> </ body>6.GetProperTyValue obtient la valeur de propriété spécifiée dans l'objet CSSSTyleDeClartation
<script> var div = document.getElementsByTAGName ("div") [0]; var styleObj = window.getCompuledStyle (div, null); console.log (styleobj.getpropertyvalue ("background-color")); </cript>PropertyName dans getPropertyValue (PropertyName); ne peut pas être une expression de chameau
obj.currentStyle ['marge-left'] fonctionne
obj.currentStyle ['marginleft'] fonctionne
window.getCompuledStyle (obj, null) ['marge-left'] fonctionne
window.getCompuledStyle (obj, null) ['marginleft'] fonctionne
window.getcomputedStyle (obj, null) .getPropertyValue ('margin-left') valide
window.getCompuledStyle (obj, null) .getPropertyValue ('marginleft') invalide
obj.currentStyle.width est valable
obj.currentstyle.background-couleur invalide
obj.currentStyle.backgroundColor fonctionne
window.getcomputedStyle (obj, null) .width valide
window.getcomputedstyle (obj, null) .background-couleur invalide
window.getcomputedStyle (obj, null) .BackgroundColor fonctionne
En résumé, l'attribut avec "-" ne peut pas être directement souligné, il existe donc une méthode GetProperTyValue pour le gérer, mais [] peut être utilisé pour remplacer GetPropertyValue.
7.DefaultView
Dans de nombreux codes de démonstration en ligne, GetCompuledStyle est appelé via l'objet document.defaultView. Dans la plupart des cas, cela n'est pas nécessaire, car il peut être appelé directement via l'objet Window. Mais il y a une situation où vous devez utiliser DefaultView, qui consiste à accéder aux styles à l'intérieur du sous-châssis sur Firefox3.6 (iframe)
La méthode d'implémentation simple ci-dessus pour obtenir des styles (recommandée) de JS 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.