Hay cuatro formas de utilizar CSS para controlar la página: estilo en línea (estilo en línea), estilo en línea, estilo de enlace y estilo importado.
Los estilos en línea (estilos en línea) están escritos en el atributo de estilo en la etiqueta html, como <div></div>
Los estilos en línea se escriben en la etiqueta de estilo, como <style type="text/css">div{width:100px height:100px}</style>;
El tipo de enlace es utilizar la etiqueta de enlace para presentar el archivo CSS, como <link href="test.css" type="text/css" rel="stylesheet" />
El método de importación consiste en utilizar la importación para introducir el archivo CSS, como @import url ("test.css")
Si desea utilizar JavaScript para obtener la información de estilo de un elemento, lo primero que le viene a la mente debería ser el atributo de estilo del elemento. Sin embargo, el atributo de estilo de un elemento solo representa el estilo en línea del elemento. Si parte de la información de estilo de un elemento está escrita en el estilo en línea y parte está escrita en un archivo CSS externo, la información de estilo completa del elemento no puede. obtenerse a través del atributo de estilo. Por lo tanto, debe utilizar el estilo calculado del elemento para obtener la información de estilo del elemento.
Utilice el método getComputedStyle del objeto de ventana para obtener el estilo calculado de un elemento. Este método tiene 2 parámetros. El primer parámetro es el elemento cuyo estilo calculado se va a obtener. El segundo parámetro puede ser nulo, una cadena vacía o pseudo. clase (como: antes,:después), ambos parámetros son obligatorios.
Pongamos un ejemplo.
<tipo de estilo="texto/css">
#pruebaDiv{
borde: 1px rojo sólido;
ancho: 100px;
altura: 100 píxeles;
color: rojo;
}
</estilo>
<div id="pruebaDiv"></div>
var testDiv = document.getElementById("testDiv");
var computedStyle = window.getComputedStyle(testDiv, "");
ancho var = estilo calculado.ancho; //100px
altura var = estilo calculado.altura; //100px
var color = estilo calculado.color; //rgb(255, 0, 0)
[/código]
Nota: Todos los atributos de color obtenidos se devuelven en formato rgb(#,#,#).
En este momento, si usa testDiv.style para obtener información de estilo, testDiv.style.width definitivamente estará vacío.
El método getComputedStyle no está implementado en IE8 y versiones anteriores, pero cada elemento en IE tiene su propia propiedad currentStyle.
Entonces, obtengamos uno general.
Copie el código de código de la siguiente manera:
var testDiv = document.getElementById("testDiv");
var styleInfo = ventana.getComputedStyle? ventana.getComputedStyle(testDiv, "") : testDiv.currentStyle;
var ancho = styleInfo.width; //100px;
var altura = styleInfo.height; //100px;
var color = styleInfo.color; // rgb(255, 0, 0)
Finalmente, tenga en cuenta que el estilo calculado de un elemento es de solo lectura. Si desea establecer el estilo de un elemento, debe utilizar el atributo de estilo del elemento (este es el verdadero propósito del atributo de estilo del elemento). .