resumen:
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:
La copia del código es la siguiente:
var test = document.getElementById ("test");
// obtener el color del nodo
test.style.color;
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:
La copia del código es la siguiente:
var test = document.getElementById ("prueba"),
demo = window.getComputedStyle (test, null);
// obtener el color del nodo
demo.
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:
La copia del código es la siguiente:
var test = document.getElementById ("prueba"),
demo = test.CurrentStyle;
// obtener el color del nodo
demo.color;
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:
La copia del código es la siguiente:
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:
La copia del código es la siguiente:
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
La copia del código es la siguiente:
función getStyle (ELE) {
estilo var = nulo;
if (window.getComputedStyle) {
style = window.getComputedStyle (ELE, NULL);
}demás{
estilo = ele.currentstyle;
}
estilo de retorno;
}