Recentemente, eu estava trabalhando em um projeto e precisava de JavaScript para inserir dinamicamente os estilos, mas o método anterior falhou! A razão pela qual verifiquei por 2 horas foi que eu era uma pessoa sacanagem. Vamos falar sobre isso no final!
O estilo de inserção de JavaScript é amplamente utilizado no desenvolvimento front-end, especialmente ao modificar o desempenho do front-end e a pele da página. A tarefa que fiz recentemente é que o usuário clica em um botão em outro site e insere um script na página de outro site para executá -lo, que inclui inserção de estilo.
De um modo geral, existem dois tipos de estilos de inserção dinâmica para JavaScript. Uma é introduzir estilos externos na página, usar a tag <ink> em <head> para introduzir um arquivo de estilo externo, e a outra é usar a tag <style> para inserir o estilo de página na página (a mencionada aqui não é o atributo de estilo).
1. Introduzir estilos externos na página:
Usando a tag <ink> em <head> para introduzir um arquivo de estilo externo, isso é relativamente simples e não há problemas de compatibilidade para cada navegador convencional:
A cópia do código é a seguinte:
função incluirlinkstyle (url) {
var link = document.createElement ("link");
link.rel = "STILELES SHEET";
link.type = "text/css";
link.href = url;
document.getElementsByTagName ("Head") [0] .AppendChild (link);
}
IncluirLinkStyle ("http://css.vevb.com/home/css/reset.css?v=20101227");
No entanto, no projeto que estou fazendo atualmente, existem muito poucos estilos aplicados por si só, e parece inapropriado introduzir diretamente um arquivo de estilo externo, então escolhi a segunda solução, usando a tag <yoy> para inserir o estilo de página na página.
2. Use a tag <yoy> para inserir estilo de página:
Este método possui problemas de compatibilidade em vários navegadores convencionais. Navegadores padrão como o Firefox não podem obter diretamente o valor CSSTEXT da folha de estilo. Nos navegadores padrão, eles só podem usar document.stylesheets [0] .cssrules [0] .csStext para obter os estilos individualmente; Ao mesmo tempo, use: document.stylesheets [0] .cssrules [0] .csStext = newcsStext; A página não atualizará automaticamente o estilo e você deve usar: document.stylesheets [0] .cssrules [0] .style.csStext = newcsStext; Isso não parece ser humanizado e simples de usar. Um bom método é usado em yui: style.appendChild (document.createTextNode (styles)); Use CreateTextNode para adicionar strings de estilo à tag <yoy>;
A cópia do código é a seguinte:
função incluir estilyleelement (estilos, styleid) {
if (document.getElementById (styleId)) {
Retornar
}
var style = document.createElement ("style");
style.id = styleid;
// é melhor definir as seguintes propriedades para o IE aqui
/*if (isie ()) {
style.type = "text/css";
style.media = "tela"
}*/
(document.getElementsByTagName ("Head") [0] || document.body) .appendChild (style);
if (style.stylesheet) {// para ie
style.stylesheet.csStext = Styles;
} else {// para w3c
style.appendChild (document.createTextNode (styles));
}
}
var styles = "#div {Background-Color:#ff3300; cor: #fffff}";
incluir estilyleelement (estilos, "newstyle");
Dessa forma, os elementos da página podem ser aplicados diretamente ao estilo, independentemente de seus elementos serem anexados através do script.
Sobre a mão boba:
Veja este código:
A cópia do código é a seguinte:
var divobj = document.createElement ("div");
divobj.id = "__div";
divobj.innerhtml = "Teste JS Insert Dom and Style";
document.body.appendChild (DIVOBJ);
var styles = "#__ div {background-color:#ff3300; cor: #fffff}";
incluir estilyleelement (estilos, "newstyle");
Como mencionado anteriormente, este projeto é quando um usuário clica em um botão em outro site e insere um script na página de outro site para executá -lo. Isso inclui inserção de estilo. Para garantir a singularidade do ID do elemento que criei o máximo possível, adicionei "__" na frente do ID do elemento para indicar essa proteção privada contra conflitos. Como resultado, a tragédia foi causada. A nomeação da classe IE6, IE7 e ID não puderam começar com o sublinhado ("_"), e eu realmente esqueci isso! Demorou duas horas para descobrir o motivo. É uma tragédia! Tire uma conclusão! Não seja barato ao fazer o front-end!