Código básico:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document </title> <style> div {color: amarillo; } </style> </head> <body> <div> Esto es div </div> </body> </html>1. Consíguelo usando el atributo de estilo elemento.
<script> var div = document.getElementsByTagName ("div") [0]; console.log (div.style.color); // "" console.log (div.style.backgroundcolor); // rojo </script>El atributo Element.style solo puede obtener estilos en línea, no puede obtener estilos en la etiqueta <style>, ni puede obtener estilos externos.
Dado que Element.Style es un atributo de un elemento, podemos reasignar el atributo para anular la visualización del elemento.
<script> var div = document.getElementsByTagName ("div") [0]; div.Style ['Background-Color'] = "verde"; console.log (div.style.backgroundcolor); // Green </script>2. Obtenga estilos a través de GetComputedStyle y CurrentStyle
El entorno de uso de GetComputedStyle es Chrome/Safari/Firefox, es decir, 9,10,11
<script> var div = document.getElementsByTagName ("div") [0]; var styleObj = window.getComputedStyle (div, nulo); console.log (styleobj.backgroundcolor); // rojo console.log (styleObj.color); // amarillo </script>CurrentStyle puede ser compatible perfectamente en IE, Chrome no es compatible, FF no admite
<script> var div = document.getElementsByTagName ("div") [0]; var styleObj = div.CurrentStyle; console.log (styleobj.backgroundcolor); // rojo console.log (styleObj.color); // amarillo </script>3. La diferencia entre ELE.Lyle y GetComputedStyle o CurrentStyle
3.1ele.style es de lectura-escritura, mientras que GetComputedStyle y CurrentStyle son de solo lectura
3.2 ELE. El estilo solo puede configurar el estilo CSS en la propiedad de estilo en la línea, y GetComputedStyle y CurrentStyle también pueden obtener otros valores predeterminados.
3.3 Lo que ele. El estilo obtiene el estilo en el atributo de estilo, no necesariamente el estilo final, mientras que los otros dos obtienen el estilo CSS final del elemento
4. Obtener escritura de compatibilidad de estilo
<script> // Obtener el estilo no línea (el estilo en la etiqueta de estilo o el estilo en el archivo CSS de enlace), OBJ es el elemento, attr es la función de nombre de estilo getStyle (obj, attr) {// para IE if (obj.currentStyle) {return obj.currentStyle [attr]; // Debido a que el attr aprobado por la función es una cadena, debe usar [] para obtener el valor} else {// para ventana de retorno no II.getComputedStyle (obj, false) [attr]; }} /* Get o establezca el atributo CSS* / function css (obj, attr, value) {if (arguments.length == 2) {return getStyle (obj, attr); } else {obj.style [attr] = valor; }} </script>5.Window.getComputedStyle (ele [, pseudoleelt]);
Si el segundo parámetro es nulo u omitido, obtenga el objeto CSSStyledEclaration que es ELE
Si es una pseudo-clase, se obtiene el objeto CSSStyledEclaration de la pseudo-clase
<style> div {ancho: 200px; Altura: 200px; Color de fondo:#FC9; tamaño de fuente: 20px; Text-Align: Center; } div: después de {contenido: "Esto es después"; Pantalla: bloque; Ancho: 100px; Altura: 100px; Color de fondo:#F93; margen: 0 auto; Línea de altura: 50px; } </style> <body> <div id = 'myDiv'> Esto es 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.getComputedStyle (div, 'después'); console.log (styleObj ['ancho']); } </script> </body>6.getPropertyValue obtiene el valor de la propiedad especificado en el objeto CSSStyledEclaration
<script> var div = document.getElementsByTagName ("div") [0]; var styleObj = window.getComputedStyle (div, nulo); console.log (styleObj.getPropertyValue ("Color de fondo")); </script>PropertyName en GetPropertyValue (Propertyname); no puede ser una expresión de camello
obj.currentstyle ['margen-izquierda'] funciona
obj.currentstyle ['marginleft'] funciona
Window.getComputedStyle (OBJ, NULL) ['Margin-Left'] funciona
Window.getComputedStyle (OBJ, NULL) ['Marginleft'] funciona
Window.getComputedStyle (OBJ, NULL) .GetPropertyValue ('Margin-Left') Válido
Window.getComputedStyle (OBJ, NULL) .getPropertyValue ('Marginleft') Inválido
obj.CurrentStyle.Width es válido
obj.currentstyle.background-color inválido
obj.currentstyle.backgroundcolor funciona
Window.getComputedStyle (OBJ, NULL) .Width Válido
Window.getComputedStyle (OBJ, NULL).
Window.getComputedStyle (OBJ, NULL). Backgroundcolor Works
En resumen, el atributo con "-" no puede señalarse directamente, por lo que hay un método GetPropertyValue para manejarlo, pero [] se puede usar para reemplazar GetPropertyValue.
7.DefaultView
En muchos códigos de demostración en línea, GetComputedStyle se llama a través del objeto Document.defaultView. En la mayoría de los casos, esto no es necesario, ya que se puede llamar directamente a través del objeto de la ventana. Pero hay una situación en la que tiene que usar DefaultView, que es acceder a los estilos dentro del subtrama en Firefox3.6 (iframe)
El método de implementación simple anterior para obtener estilos (recomendados) de JS es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.