En general, hay dos formas en que JavaScript accede a las propiedades CSS: "Acceso a través de elementos" y "Acceso directamente en hojas de estilo". Además, hay un problema que no se puede ignorar al acceder a los estilos: estilos de tiempo de ejecución.
1. Acceso a través de elementos
Dado que desea acceder a la hoja de estilo a través de elementos, primero debe determinar qué elemento es. Este es el contenido de DOM, por lo que no diré más al respecto aquí. Después de obtener la referencia, puede acceder a un cierto atributo a través de "Reference.Style. Atributo para acceder". Por ejemplo, consulte el siguiente código.
<preame = "código"> <preame = "código"> <! DocType html> <html> <adhead> <meta charset = "utf-8"> <style> #a {height: 100px; Ancho: 100px; Color de fondo: rojo; } </style> </head> <body> <div id = "A"> </div> </body> </html>Cuando queremos obtener el color de fondo de #A, podemos documentar.getElementById ("a"). Style.backgroundcolor; De esta manera, el acceso se completa. Después de eso, ya sea para devolver o cambiar el valor del atributo, depende de usted.
2. Acceso directo a la hoja de estilo
En general, el acceso directo a la hoja de estilo es "primero encontrar el bloque de estilo correspondiente, luego encontrar las reglas de estilo correspondientes en el bloque de estilo y finalmente encontrar el estilo correspondiente en la regla de estilo".
Hablemos de qué bloques de estilo son los primeros. En el código, el código CSS existirá entre las etiquetas <style> </style> o en <link>, y un <style> </style> o <ink> es un bloque de estilo. En el código, se pueden organizar múltiples bloques de código en secuencia de arriba a abajo, y podemos acceder a bloques de estilo como accedemos a elementos de matriz. Por ejemplo, si queremos acceder al primero en el bloque de estilo, podemos documentar. Hojas de estilos [0]
Entonces di qué reglas de estilo son. Primero mira el siguiente código
<preame = "código"> <! DocType html> <html> <head> <meta charset = "utf-8"> <style> #a {altura: 100px; Ancho: 100px; Color de fondo: rojo; } #b {altura: 100px; Ancho: 100px; color de fondo: azul; } </style> </head> <body> <div id = "a"> </div> <div id = "b"> </div> </body> </html>El código especifica los estilos de #A y #B respectivamente. La colección de estilos de #A o la colección de #B es una regla de estilo. En este bloque de estilo, la primera regla de estilo para #A y la segunda regla de estilo para #B. También podemos acceder a reglas de estilo como nosotros podemos acceder a elementos de matriz. Por ejemplo, si queremos acceder a las reglas de estilo #B, podemos documentar.styles hojas [0] .cssrules [1] Por supuesto, puede optar por escribir document.stylesheet [0] .rules [1] como este, pero este método de escritura no es compatible con Firefox.
Entonces podemos acceder al estilo correspondiente. Por ejemplo, si queremos cambiar el color de fondo de #b a verde, podemos documentar.styles hojas [0] .cssrules [1] .style.backgroundcolor = "verde";
3. Estilo de tiempo de ejecución
Mira el siguiente código:
<! DocType html> <html> <head> <meta charset = "utf-8"> <style> #a {altura: 100px; Ancho: 100px; Color: rojo; } #b {altura: 100px; Ancho: 100px; } </style> </head> <body> <div id = "A"> <div ID = "b"> Observar el color de la fuente </div> </div> </body> </html>Cuando ejecutamos alerta (document.getElementById ("b"). Style.color);, encontramos que no se emite nada en la ventana emergente, pero el color de fuente de la página obviamente es rojo. ¿Por qué? Esto se debe a que los atributos del objeto de estilo de cada elemento no se actualizan al instante. Cuando queremos emitir rojo en la ventana emergente, necesitamos usar el estilo de tiempo de ejecución. Window.getComputedStyle (document.getElementById ("b"), nulo) .color para que pueda acceder a "rojo". Hay otra forma de acceder al documento de estilo de ejecución. GetElementById ("B"). CurrentStyle.color, pero de esta manera solo es compatible con IE.