Después de leer el "método de implementación para crear o agregar hojas de estilo CSS con JavaScript", es fácil para usted descubrir cómo modificar las hojas de estilo CSS.
Me encontré con un amigo en el foro hoy haciendo esta pregunta:
<syle> .ls {width = 120px;} </style> <script> // Agregue una oración aquí para cambiar el valor del ancho en .ls, cómo escribirlo </script>Algunos amigos respondieron: "Si hay muchos objetos usando .ls, es realmente inconveniente usar js, jQuery es conveniente, $ (". Ls "). Ancho (200); eso está bien".
Quiere usar la clase Selector.ls de JQ para seleccionar todos los objetos que usan este estilo y ajustarlos uno por uno, en lugar de cambiar la hoja de estilo CSS, por lo que hay preocupaciones sobre "muchos objetos".
Pero el problema es que esto solo cambia el estilo de expresión específico de esos objetos, no la configuración .ls. Si aparece otro elemento que usa el estilo .ls, seguirá siendo el mismo. Todavía necesita ajustar este elemento nuevamente, para tratar los síntomas, pero no la causa raíz. Además, este método también determina que es imposible lograrlo simplemente en una oración.
Hay bastantes personas que piensan en esto, y si lee el artículo "Método de implementación para crear o agregar dinámicamente hojas de estilo CSS con JavaScript", creo que pensará fácilmente en cómo resolver este problema en una oración, que es concisas y eficientes (el navegador restablecerá automáticamente todos los elementos que aplican este estilo) y realmente modificará la configuración de estilo. Los elementos recién agregados que usan este estilo aplicarán automáticamente la configuración modificada. Entonces, has aprendido conocimiento de nivel superior que se distingue de muchas personas. Permítanme explicar el método en detalle a continuación:
Debido al ejemplo anterior, no es fácil ver el efecto. He escrito otro ejemplo a continuación. Es más fácil ver el efecto a través del cambio de color:
<syle> .theforever {ancho: 50px; color: rojo;}#theforever {width: 150px; color: silver;} </ystye> <div> Debe ser rojo aquí, pero se volverá amarillo por la siguiente configuración de estilo CSS </div> <Div id = "The Forever"> Debe ser Silver-Gray aquí. De hecho, esto no cambiará, solo para comparar </div> <script> document.stylesheets [0] .csstext = document.stylesheets [0] .csstext.replace (/rojo/g, "amarillo"); // ¿no está bien? </script>El ejemplo anterior no está dirigido a un nombre de estilo específico, sino colores generales (si lo mueve directamente a una página de CSS más compleja con palabras rojas que no indican colores, esto también puede conducir a errores. Siempre he estado extremadamente disgustado con el uso de código que no está basado en el cerebro y no da demasiadas instrucciones), pero también es fácil cambiarlo a un nombre de estilo específico:
De lo anterior, podemos ver que document.styles hheets [0] .csstext es el contenido dentro de todo <style> </style>, que es equivalente a una variable de cadena. Entonces, si desea cambiar su configuración para .LS, solo necesita usar ".ls {width = 120px;}" como la parte de reemplazo para reemplazar y ".ls {width = 555px;}" como el objetivo de reemplazo, y eso está bien.
El artículo anterior sobre cómo modificar dinámicamente las hojas de estilo CSS con JavaScript es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.