Depois de ler o "método de implementação de criar ou adicionar dinamicamente folhas de estilo CSS com JavaScript", é fácil para você descobrir como modificar as folhas de estilo CSS.
Por acaso encontrei um amigo no fórum hoje fazendo esta pergunta:
<Toy> .ls {width = 120px;} </style> <cript> // Adicione uma frase aqui para alterar o valor da largura em .ls, como escrevê -lo </sCript>Alguns amigos responderam: "Se houver muitos objetos usando .ls, é realmente inconveniente usar JS, o jQuery é conveniente, $ (". LS "). Largura (200); tudo bem".
Ele deseja usar o seletor de classe do JQ para selecionar todos os objetos que usam esse estilo e ajustá -los um por um, em vez de alterar a folha de estilo CSS, para que haja preocupações sobre "muitos objetos".
Mas o problema é que isso altera apenas o estilo de expressão específico desses objetos, não as configurações .ls. Se outro elemento usando o estilo .ls aparecer, ele ainda será o mesmo. Você ainda precisa ajustar esse elemento novamente, para tratar os sintomas, mas não a causa raiz. Além disso, esse método também determina que é impossível alcançá -lo simplesmente em uma frase.
Existem muitas pessoas que pensam sobre isso e, se você ler o artigo "Método de implementação de criar ou adicionar dinamicamente folhas de estilo CSS com JavaScript", acredito que você pense facilmente em como resolver esse problema em uma frase, que é concisa e eficiente (o navegador redefinirá automaticamente todos os elementos que aplicam esse estilo) e modificarão os configurações de estilo. Os elementos recém -adicionados que usam esse estilo aplicarão automaticamente as configurações modificadas. Então, você aprendeu conhecimento de nível superior que se distingue de muitas pessoas. Deixe -me explicar o método em detalhes abaixo:
Por causa do exemplo acima, não é fácil ver o efeito. Eu escrevi outro exemplo abaixo. É mais fácil ver o efeito através da mudança de cor:
<Estilo> .TheRever {Largura: 50px; cor: vermelho;}#the paraver {width: 150px; cor: prata;} </style> <div> Deve ser vermelho aqui, mas será amarelo pelo js abaixo, alterando as configurações de prata do CSS </div> <div = "theever"> deve ser um grão de prata. De fato, isso não vai mudar, apenas para comparação </div> <cript> document.stylesheets [0] .csStext = document.stylesheets [0] .csStext.replace (/Red/G, "Yellow"); // Não está bem? </script>O exemplo acima não é destinado a um nome de estilo específico, mas cores gerais (se você o move diretamente para uma página CSS mais complexa com palavras vermelhas que não indicam cores, isso também pode levar a erros. Sempre fiquei extremamente enojado com o uso de código que não é baseado no cérebro e não fornece muitas instruções), mas também é fácil para mudar para um nome específico:
Do exposto, podemos ver que o documento.stylesheets [0] .CSSTEXT é o conteúdo dentro de todo o <Style> </style>, que é equivalente a uma variável de sequência. Portanto, se você deseja alterar suas configurações para .ls, só precisará usar ".ls {width = 120px;}" como a parte de substituição para substituir e ".ls {width = 555px;}" como o alvo de reposição e isso é bom.
O artigo acima sobre como modificar dinamicamente as folhas de estilo CSS com JavaScript é todo o conteúdo que compartilho com você. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.