Manera fácil de obtener estilos de elementos en JS nativo

Durante el proceso de desarrollo, a menudo encontramos el estilo de los elementos DOM a través de JS. Hay muchos métodos, como: al cambiar la clase de elementos DOM. Ahora discutimos JS nativo para obtener el estilo CSS de los elementos DOM, tenga en cuenta que no es una configuración

Antes de comenzar, primero hablemos sobre la obtención de todos los objetos de atributo CSS que finalmente se aplican al elemento. Si no se establece un estilo en el elemento, se devolverá el estilo predeterminado del navegador.

1.Ele.

Al aprender DOM, veo que los valores de estilo de elemento se obtienen a través del estilo, pero a veces lo que obtengo no son los valores de estilo del nodo, sino el valor vacío. Esto se debe a que Ele.Style solo puede obtener el valor de estilo escrito en el atributo de estilo en la etiqueta del elemento, y no puede obtener los atributos de estilo definidos en <Syle> </style> y cargado a través de <link href = "css.css">

ejemplo:

 var test = document.getElementById ("test"); // Obtener el color test.style.color del nodo;

2. GetComputedStyle ()

GetComputedStyle es un valor de atributo CSS que puede obtener todos los valores de atributo CSS de uso final del elemento actual.

La sintaxis es la siguiente:

 Window.getComputedStyle ("Elemento", "Pseudo-Clase");

Este método acepta dos parámetros: para obtener el elemento del estilo calculado y una cadena de pseudo-elemento (por ejemplo ": antes"). Si no se requiere información de pseudo elemento, el segundo parámetro puede ser nulo. También se puede usar a través de document.defaultView.getComputedStyle ("elemento", "pseudo-class");

ejemplo:

 var test = document.getElementById ("test"), demo = window.getComputedStyle (test, null); // Obtener la demostración de color. Color del nodo

Nota: Firefox y Safari convertirán los colores en formato RGB. Si no hay estilo en el nodo de prueba, use style.length para ver el número de estilos predeterminados del navegador. IE6-8 no admite este método, se requiere el siguiente método

3. Ele.

CurrentStyle es un atributo del navegador IE en sí. Su sintaxis es similar a ELE.SLYE. La diferencia es que el elemento. CurrentStyle devuelve el valor final del atributo CSS del elemento aplicado actualmente (incluido el archivo CSS de enlace externo, el atributo <estilo> integrado en la página, etc.).

gramática:

 VAR style = dom.CurrentStyle;

ejemplo:

 var test = document.getElementById ("test"), demo = test.currentStyle; // Obtener el color demo.color del nodo;

Nota: Para un borde integral de atributos, etc., es decir, devuelve indefinido. Algunos otros navegadores devuelven los valores, y otros no regresan, pero atribuyen los valores de retorno de BorderleftWidth.

4. GetPropertyValue ()

GetPropertyValue obtiene el nombre de propiedad directa del estilo CSS

La sintaxis es la siguiente:

 Window.getComputedStyle (elemento, nulo) .getPropertyValue (propiedad)

ejemplo:

 var test = document.getElementById ('test'); Window.getComputedStyle (Test, NULL) .GetPropertyValue ("Color de fondo");

Nota: El nombre del atributo no admite el formato de camello, es decir, el6-8 no admite este método, por lo que se requiere el siguiente método

5. GetAttribute

getAttribute es similar a GetPropertyValue, una diferencia es el formato de camello del nombre de la propiedad

ejemplo:

 var test = document.getElementById ('test'); Window.getComputedStyle (test, null) .getPropertyValue ("BackgroundColor");

Nota : Este método solo admite IE6-8

resumen:

El método jQuery css (), la operación subyacente utiliza los métodos GetComputedStyle y GetPropertyValue. Cuando usamos el desarrollo de JS nativo, podemos obtener el valor del elemento a través de los métodos anteriores.

El siguiente es un método compatible con IE, Firefox, Chrome y otros navegadores para obtener estilos de elementos, que se pueden aplicar al proyecto

 función getStyle (ELE) {var style = null; if (window.getComputedStyle) {style = window.getComputedStyle (ele, null); } else {style = ele.CurrentStyle; } estilo de retorno;}

La forma simple anterior de obtener estilos de elementos en JS nativo es todo el contenido que comparto con ustedes. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.