Hablemos nuevamente sobre agregar reglas de estilo dinámicamente.

Solía ​​​​incluir una función útil en una publicación de blog y se ha utilizado ampliamente en varias de mis publicaciones de blog. He estado leyendo mucho recientemente, así que escribí esta publicación de blog para ordenar las cosas nuevas que aprendí.

No hay duda de que, según el principio de separación de rendimiento y estructura, importar directamente una nueva hoja de estilo es la mejor opción, pero en algunos casos no funcionará, por ejemplo, si creamos un DIV arrastrable, desde la perspectiva de. Al configurar estilos, colóquelo absolutamente para evitar que afecte el flujo del documento original y luego cambie sus valores superior e izquierdo poco a poco para lograr el efecto de movimiento. Dado que el arrastre tiene un concepto de tiempo, 24 fotogramas por segundo, es imposible incluirlo todo en la hoja de estilo. Por lo tanto, es muy necesario generar reglas de estilo dinámicamente y modificar rápidamente las reglas de estilo. El W3C ha trabajado mucho para esto y se han ampliado muchas interfaces.

Para dar un paso atrás, la separación entre rendimiento y estructura no se limita a importar hojas de estilo. Ya sabes, hay tres tipos de estilos, estilos externos, estilos internos y estilos en línea.

• Los estilos externos, los que mencionamos anteriormente, están escritos en un archivo CSS separado.
• Los estilos internos se escriben de forma independiente en una etiqueta de estilo, generalmente colocada en la etiqueta principal. El estilo generado por la última función que proporcioné es el estilo interno.
• Los estilos en línea son estilos escritos en el atributo de estilo del elemento.

Las interfaces recién agregadas se concentran principalmente en estilos externos; digo interfaces porque las implementaciones correspondientes las proporciona el navegador. Los tipos arrogantes como IE6 nunca ignoran su existencia.

En el modelo W3C, la etiqueta de enlace y la etiqueta de estilo de tipo "text/css" representan un objeto CSSStyleSheet. Podemos obtener todos los objetos CSSStyleSheet en la página actual a través de document.styleSheets, pero esta es una colección, no una simple. formación. Cada objeto CSSStyleSheet tiene las siguientes propiedades,

• tipo: siempre devuelve una cadena "texto/css".
• deshabilitado: tiene el mismo efecto que la entrada deshabilitada y el valor predeterminado es falso.
• href: Devuelve la URL, si es una etiqueta de estilo, es nula.
• título: Devuelve el valor de su título. El título es el mismo que el título de un elemento ordinario. Puedes escribir lo que quieras.
• medios: Los datos devueltos por IE y Firefox no son consistentes, por lo que es difícil decirlo. media se utiliza para especificar para qué dispositivos son válidas las reglas de estilo que posee. El valor predeterminado es all.
• ownerRule: devuelve un objeto CSSRule de solo lectura si la hoja de estilo se introduce con @import.
• cssRules: devuelve una colección de objetos de reglas de estilo de solo lectura (objetos CSSStyleRule).

El objeto de regla de estilo (objeto CSSStyleRule) fue desarrollado por W3C para establecer el estilo con más detalle. Por ejemplo, lo siguiente corresponde a un objeto de regla de estilo:

botón[tipo] {
relleno: 4px 10px 4px 7px;
altura de línea: 17px;
}

El objeto de regla de estilo tiene los siguientes atributos principales: tipo, cssText, parentStyleSheet, parentRule.

Type es algo similar a nodeType, que subdivide reglas de estilo. Utiliza un número entero para representar su tipo. La situación específica es la siguiente.

• 0: CSSRule.UNKNOWN_RULE
• 1: CSSRule.STYLE_RULE (definir un objeto CSSStyleRule)
• 2: CSSRule.CHARSET_RULE (defina un objeto CSSCharsetRule, utilizado para establecer el juego de caracteres de la hoja de estilo actual, el valor predeterminado es el mismo que el de la página web actual)
• 3: CSSRule.IMPORT_RULE (defina un objeto CSSImportRule, que utiliza @import para introducir otras hojas de estilo)
• 4: CSSRule.MEDIA_RULE (defina un objeto CSSMediaRule, utilizado para establecer si este estilo se utiliza para monitores, impresoras, proyectores, etc.)
• 5: CSSRule.FONT_FACE_RULE (defina un objeto CSSFontFaceRule, @font-face de CSS3)
• 6: CSSRule.PAGE_RULE (definir un objeto CSSPageRule)

No hace falta decir que cssText es un atributo muy útil que convierte directamente cadenas en reglas de estilo, ignorando las diferencias en los atributos de estilo de cada navegador, como cssFloat y styleFloat.

parentStyleSheet y parentRule son ambos para @import. Sin embargo, @import tiene problemas en IE, por lo que básicamente no lo uso.