Recientemente, estaba trabajando en un proyecto y necesitaba JavaScript para insertar dinámicamente estilos, ¡pero el método anterior falló! La razón por la que revisé durante 2 horas fue que era una persona cachonda. ¡Hablemos de esto al final!
El estilo de inserción de JavaScript se usa ampliamente en el desarrollo front-end, especialmente al modificar el rendimiento frontal y el desollado de página. La tarea que he hecho recientemente es que el usuario hace clic en un botón en otro sitio e inserta un script en otra página de sitio para ejecutarlo, que incluye la inserción de estilo.
En términos generales, hay dos tipos de estilos de inserción dinámica para JavaScript. Una es introducir estilos externos en la página, usar la etiqueta <link> en <Evieve> para introducir un archivo de estilo externo, y el otro es usar la etiqueta <Syle> para insertar el estilo de la página en la página (el mencionado aquí no es el atributo de estilo).
1. Introducir estilos externos en la página:
Usando la etiqueta <link> en <toad> para introducir un archivo de estilo externo, esto es relativamente simple y no hay problemas de compatibilidad para cada navegador convencional:
La copia del código es la siguiente:
función includeLinkStyle (URL) {
Var link = document.createElement ("enlace");
link.rel = "Stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsBytagName ("Head") [0] .AppendChild (enlace);
}
includeLinkStyle ("http://css.vevb.com/home/css/reset.css?v=20101227");
Sin embargo, en el proyecto que estoy haciendo actualmente, hay muy pocos estilos aplicados por sí mismo, y parece inapropiado introducir directamente un archivo de estilo externo, por lo que elegí la segunda solución, utilizando la etiqueta <estilo> para insertar el estilo de página en la página.
2. Use la etiqueta <estilo> para insertar estilo de página:
Este método tiene problemas de compatibilidad en varios navegadores convencionales. Los navegadores estándar como Firefox no pueden obtener directamente el valor de Csstext de la hoja de estilo. En los navegadores estándar, solo pueden usar documentos. Hojas de estilos [0] .cssrules [0] .csstext para obtener los estilos individualmente; Al mismo tiempo, use: document.stylesheets [0] .cssrules [0] .csstext = newcsstext; La página no actualizará automáticamente el estilo, y debe usar: document.stylesheets [0] .cssrules [0] .style.csstext = newcsstext; Esto no parece ser humanizado y fácil de usar. Se utiliza un buen método en YUI: style.appendChild (document.createTextNode (estilos)); Use CreateTextNode para agregar cadenas de estilo a la etiqueta <Syle>;
La copia del código es la siguiente:
función includeStyleElement (Styles, StyleId) {
if (document.getElementById (styleId)) {
Devolver
}
Var style = document.createElement ("estilo");
style.id = styleID;
// es mejor establecer las siguientes propiedades para IE aquí
/*if (isie ()) {
style.type = "text/css";
style.media = "pantalla"
}*/
(document.getElementsBytagName ("cabeza") [0] || document.body) .appendChild (estilo);
if (style.stylesheet) {// para IE
style.stylesheet.csstext = styles;
} else {// para w3c
style.appendChild (document.createTextNode (Styles));
}
}
var styles = "#div {background-color:#ff3300; color: #fffff}";
includeStyleElement (estilos, "Newstyle");
De esta manera, los elementos en la página se pueden aplicar directamente al estilo, independientemente de si sus elementos se agregan a través del script.
Sobre la mano tonta:
Mira este código:
La copia del código es la siguiente:
var divobj = document.createElement ("div");
divobj.id = "__div";
divobj.innerhtml = "prueba js inserte dom and style";
document.body.appendChild (Divobj);
var styles = "#__ div {background-color:#ff3300; color: #fffff}";
includeStyleElement (estilos, "Newstyle");
Como se mencionó anteriormente, este proyecto es cuando un usuario hace clic en un botón en otro sitio e inserta un script en otra página de sitio para ejecutarlo. Esto incluye la inserción de estilo. Para garantizar la singularidad de la identificación del elemento que creé tanto como sea posible, agregué "__" frente a la identificación del elemento para indicar que la protección privada contra los conflictos. Como resultado, la tragedia fue causada. El nombramiento de IE6, IE7 Class e ID no pudieron comenzar con un bajo ("_"), ¡y en realidad olvidé esto! Tomó dos horas descubrir la razón. ¡Es una tragedia! ¡Tirar las tablas! ¡No seas barato al hacer el front-end!