Como tudo, eu aconselho que tenha os cuidados de usar um blog de testes antes e muito cuidado porque, assim como em Html ou Css qualquer caractere errado faz com que a coisa não funcione.
Vantagens de inserir Css por meio de JavaScript
Esse meio serviria para dar estilos a elementos que precisam de javascript para funcionar, se você colocou seu script no final da página(antes de fechar <body>), aí esses elementos carregam por último, sendo assim, o estilo deles também pode ficar por último e fazer com que uma folha de estilo Css baixe mais rapidamente por ter menos códigos.Outra vantagem, pode ser usado para chamar a atenção de parte da página, por exemplo, você pode, na folha de estilos colocar uma cor de fundo ou borda para um elemento e usar o script externo para trocar essa cor quando a página estiver quase que totalmente carregada.
Outra, se por algum motivo você não pode mexer na folha de estilo de seu blog ou nem modificar o Css, esse estilo pode ser útil.
Desvantagens de inserir Css por meio de JavaScript
É javascript e, aproximadamente, entre 1 e 5% de usuários navega com javascript desativado...Outra desvantagem é alguns bytes a mais e por isso eu só aconselho a usar se achar muito necessário ou tiver uma quantia razoável de estilos para adicionar via script, eu uso aqui no blog uns 10% do estilo que estaria na minha folha de estilos está num .js porque diversos elementos aqui dependem de javascript e sendo assim, quase todo o estilo deles eu inseri no .js para que o conteúdo do blog e estilo principal carreguem mais rápido.
Javascript para inserir Css na página
O script vai 'criar' um estilo Css antes de fechar a tag <head> e assim ele vai ser predominante ao estilo Css já existente na head e até mesmo a folha de estilo que alí sejam chamadas, sendo assim ele terá muita "força", será bem predominante a alguns outros estilos.Como todo código você deve ter cuidado para não 'estragar', ele tem uma característica que é, diferente do Css você não pode deixar linha quebrada na parte do estilo, para o código de exemplo, eu coloquei o seguinte trecho Css body{background: yellow;}b{color: green;}
Código do script para inserir Css na página
Primeiro vou mostrar o código com as var em destaque de forma que fique fácil de entender, depois vou passar o mesmo código com as var reduzidas para uma letra apenas.<script type='text/javascript'>
var op=document,CriaStyle=op.createElement('style');var AddStyle='body{background: yellow;}b{color: green;}';CriaStyle.setAttribute('type','text/css');if(CriaStyle.styleSheet){CriaStyle.styleSheet.cssText=AddStyle;}else{var Insiste=op.createTextNode(AddStyle);CriaStyle.appendChild(Insiste);};var QuerStyle=op.getElementsByTagName('head')[0];QuerStyle.appendChild(CriaStyle);
</script>No script acima eu deixem a tag <script> com um
Código do script para inserir Css na página(reduzido)
Num post anterior eu falei sobre redução de tags no Html, e, em outra postagem que fiz sobre uma descoberta de um "programa" online de redução/otimização de javascript eu percebi que as vars podem também ser bem reduzida, eu já o fazia, mas nunca a tão grau de redução, esse sistema simplesmente mudou quase todas as vars de meu script para apenas uma letra, reduzindo bastante o js, uma vez que, se usarmos esse tipo de script é para fazer a página carregar melhor, ou mais rápido ou de maneira que fique mais confortável ao leitor, ou seja, elementos principais aparecendo primeiro, pensando nisso, a gente deve explorar todas as opções e não adianta eu tentar passar uma ideia num post e no próximo que mostra códigos eu não usar mais essa ideia, então, veremos o mesmo script acima, porém bastante reduzido:<script>var o=document,J=o.createElement('style');var M='body{background:#ff0}b{color:green}';J.setAttribute('type','text/css');if(J.styleSheet){J.styleSheet.cssText=M;}else{var B=o.createTextNode(M);J.appendChild(B);};var C=o.getElementsByTagName('head')[0];C.appendChild(J);</script>Só é bom ter algum cuidado, raramente acontece, as vezes pode ocorrer de uma var já existir se for adicionar num script já existente...
Nenhum comentário:
Postar um comentário
→Dê sua opinião. Faça comentário relacionado ao post.
→Comentário com e-mail será excluído
→Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
→Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)
Comentário reflete a opinião do comentarista. Desde já, Obrigado!