PD: Es para obtener el estilo, no para establecer el estilo. Si no se establece ningún valor de estilo para el elemento, se devuelve el valor predeterminado dado por el navegador. (Foro ordenado)
1. Element.style: solo no se puede obtener el valor de estilo escrito en el atributo de estilo en la etiqueta del elemento. No se puede obtener el atributo de estilo definido en <style> </style> y cargado a través de <link href = "css.css">.
La copia del código es la siguiente:
var ele = document.getElementById ('ele');
Ele.style.color; // obtener color
2. Window.getComputedStyle (): puede obtener todos los valores finales del atributo CSS del elemento actual.
La copia del código es la siguiente: window.getComputedStyle ("elemento", "pseudo-class");
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");
La copia del código es la siguiente:
var ele = document.getElementById ('ele');
var styles = window.getComputedStyle (ele, nulo);
estilos.color; // obtener color
Puede usar style.length para ver la cantidad de estilos predeterminados del navegador. IE6-8 no admite este método, y el siguiente método debe usarse. Para Firefox y Safari, el color se convertirá en formato RGB.
3. Element.CurrentStyle: Especial para IE, devuelve el valor final del atributo CSS del elemento aplicado actualmente (incluido el archivo CSS de enlace externo, el atributo <style> incrustado en la página, etc.).
La copia del código es la siguiente:
var ele = document.getElementById ('ele');
var estilos = ele.CurrentStyle;
estilos.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 (): Obtenga el nombre de propiedad directa del estilo CSS
La copia del código es la siguiente:
var ele = document.getElementById ('ele');
Window.getComputedStyle (ele, nulo) .getPropertyValue ('color');
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 (): Similar a GetPropertyValue, una diferencia es el formato de camello del nombre de la propiedad
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.
El siguiente método de obtención de estilo es compatible con IE, Chrome, Firefox, etc.
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;
}
En jQuery, CSS () se usa comúnmente para obtener propiedades de estilo, y su operación subyacente aplica los métodos GetComputedStyle y GetPropertyValue.