Vamos falar sobre como adicionar regras de estilo dinamicamente novamente

Eu costumava fornecer uma função útil em uma postagem do blog e ela tem sido amplamente usada em várias postagens do meu blog. Tenho lido muito recentemente, então escrevi esta postagem no blog para resolver as coisas novas que aprendi.

Não há dúvida de que com base no princípio da separação entre desempenho e estrutura, importar diretamente uma nova folha de estilo é a melhor escolha, mas em alguns casos não funcionará. Por exemplo, se fizermos um DIV arrastável, do ponto de vista de. definindo estilos, é Posicione-o absolutamente para evitar que afete o fluxo do documento original e, em seguida, altere seus valores superior e esquerdo aos poucos para obter o efeito de movimento. Como arrastar tem um conceito de tempo, 24 quadros por segundo, é impossível incluir tudo na folha de estilos. Portanto, é muito necessário gerar regras de estilo dinamicamente e modificar rapidamente as regras de estilo. O W3C fez muito trabalho para isso. No DOM2.0, muitas interfaces foram expandidas.

Para dar um passo atrás, a separação entre desempenho e estrutura não se limita à importação de folhas de estilo. Você sabe, existem três tipos de estilos: estilos externos, estilos internos e estilos embutidos.

• Os estilos externos, os que mencionamos acima, são escritos em um arquivo CSS separado.
• Os estilos internos são escritos independentemente em uma tag de estilo, geralmente colocada na tag head. O estilo gerado pela função que forneci por último é o estilo interno.
• Estilos embutidos são estilos escritos no atributo style do elemento.

As interfaces recém-adicionadas estão concentradas principalmente em estilos externos - digo interfaces porque as implementações correspondentes são fornecidas por navegadores arrogantes como o IE6 nunca ignoram sua existência.

No modelo W3C, a tag de link e a tag de estilo do tipo "text/css" representam um objeto CSSStyleSheet. Podemos obter todos os objetos CSSStyleSheet na página atual por meio de document.styleSheets, mas esta é uma coleção, não uma simples. variedade. Cada objeto CSSStyleSheet possui as seguintes propriedades,

• type: sempre retorna string "text/css".
• desabilitado: tem o mesmo efeito que a entrada desabilitada e o padrão é falso.
• href: Retorna a URL, se for uma tag de estilo é nula.
• título: Retorna o valor de seu título. O título é igual ao título de um elemento comum.
• mídia: As coisas retornadas pelo IE e pelo Firefox não são consistentes, por isso é difícil dizer. media é usado para especificar para quais dispositivos as regras de estilo que ele possui são válidas. O padrão é todos.
• OwnerRule: Retorna um objeto CSSRule somente leitura se a folha de estilos for introduzida com @import.
• cssRules: Retorna uma coleção de objetos de regra de estilo somente leitura (objetos CSSStyleRule).

O objeto de regra de estilo (objeto CSSStyleRule) foi desenvolvido pelo W3C para definir o estilo com mais detalhes. Por exemplo, o seguinte corresponde a um objeto de regra de estilo:

botão[tipo] {
preenchimento: 4px 10px 4px 7px;
altura da linha: 17px;
}

O objeto de regra de estilo possui os seguintes atributos principais: type, cssText, parentStyleSheet, parentRule.

Type é um pouco semelhante a nodeType, que subdivide regras de estilo. Ele usa um número inteiro para representar seu tipo. A situação específica é a seguinte

• 0: CSSRule.UNKNOWN_RULE
• 1: CSSRule.STYLE_RULE (defina um objeto CSSStyleRule)
• 2: CSSRule.CHARSET_RULE (defina um objeto CSSCharsetRule, usado para definir o conjunto de caracteres da folha de estilo atual, o padrão é o mesmo da página da web atual)
• 3: CSSRule.IMPORT_RULE (defina um objeto CSSImportRule, que deve usar @import para introduzir outras folhas de estilo)
• 4: CSSRule.MEDIA_RULE (defina um objeto CSSMediaRule, usado para definir se este estilo é usado para monitores, impressoras, projetores, etc.)
• 5: CSSRule.FONT_FACE_RULE (defina um objeto CSSFontFaceRule, @font-face do CSS3)
• 6: CSSRule.PAGE_RULE (definir um objeto CSSPageRule)

Escusado será dizer que cssText é um atributo muito útil que converte strings diretamente em regras de estilo, ignorando as diferenças nos atributos de estilo de cada navegador, como cssFloat e styleFloat.

parentStyleSheet e parentRule são ambos para @import. No entanto, @import tem problemas no IE, então basicamente não o uso.