Geralmente, existem duas maneiras pelas quais o JavaScript acessa as propriedades do CSS: "Acesso através de elementos" e "Acesso diretamente nas folhas de estilo". Além disso, há um problema que não pode ser ignorado ao acessar estilos - estilos de tempo de execução.
1. Acesso através de elementos
Como você deseja acessar a folha de estilo através de elementos, primeiro determine qual elemento ele é. Este é o conteúdo do DOM, então não vou dizer mais sobre isso aqui. Após obter a referência, você pode acessar um determinado atributo através de "Reference.style. Atributo ao Access". Por exemplo, consulte o código a seguir.
<pré-nome = "code"> <pre name = "code"> <! doctype html> <html> <head> <meta charset = "utf-8"> <style> #a {altura: 100px; Largura: 100px; cor de fundo: vermelho; } </style> </head> <body> <div id = "a"> </div> </body> </html>Quando queremos obter a cor de fundo do #A, podemos documentar.getElementById ("a"). Style.backgroundColor; Dessa forma, o acesso é concluído. Depois disso, se deve retornar ou alterar o valor do atributo, cabe a você.
2. Acesso direto à folha de estilo
Em geral, o acesso direto à folha de estilo é "primeiro encontre o bloco de estilo correspondente, depois encontre as regras de estilo correspondente no bloco de estilo e, finalmente, encontre o estilo correspondente na regra do estilo".
Vamos falar sobre quais blocos de estilo são os primeiros. No código, o código CSS existirá entre as tags <style> </style> ou em <link>, e um <style> </style> ou <link> é um bloco de estilo. No código, vários blocos de código podem ser organizados em sequência de cima para baixo, e podemos acessar blocos de estilo como acessar elementos da matriz. Por exemplo, se queremos acessar o primeiro no bloco de estilo, podemos documentar.stylesheets [0]
Então diga que regras de estilo são. Primeiro veja o seguinte código
<pré-nome = "code"> <! doctype html> <html> <head> <meta charset = "utf-8"> <yoy> #a {altura: 100px; Largura: 100px; cor de fundo: vermelho; } #b {altura: 100px; Largura: 100px; Background-Color: Blue; } </style> </head> <body> <div id = "a"> </div> <div id = "b"> </div> </body> </html>O código especifica os estilos de #A e #B, respectivamente. A coleção de estilos de #A ou a coleção de #B é uma regra de estilo. Nesse bloco de estilo, a regra do primeiro estilo para #A e a regra do segundo estilo para #B. Também podemos acessar regras de estilo como podemos acessar elementos da matriz. Por exemplo, se queremos acessar as regras do estilo #B, podemos documentar.stylesheets [0] .cssrules [1] É claro que você pode optar por escrever document.stylesheet [0] .Rules [1] como este, mas este método de escrita não é suportado pelo Firefox.
Então podemos acessar o estilo correspondente. Por exemplo, se queremos alterar a cor de fundo do #B para verde, podemos documentar.stylesheets [0] .cssrules [1] .style.backgroundcolor = "verde";
3. Estilo de tempo de execução
Veja o seguinte código:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <yoy> #a {altura: 100px; Largura: 100px; Cor: vermelho; } #b {altura: 100px; Largura: 100px; } </style> </head> <body> <div id = "a"> <div id = "b"> Observe a cor da fonte </div> </div> </body> </html>Quando executamos alerta (document.getElementById ("b"). Style.color);, descobrimos que nada é emitido na janela pop-up, mas a cor da fonte da página é obviamente vermelha. Por que? Isso ocorre porque os atributos do objeto de estilo de cada elemento não são atualizados instantaneamente. Quando queremos gerar vermelho na janela pop-up, precisamos usar o estilo de tempo de execução. window.getComputedStyle (document.getElementById ("b"), null) .color para que você possa acessar "vermelho". Há outra maneira de acessar o documento do estilo de tempo de execução.getElementById ("b").