A dica é realmente interessante e já me ajudou em outros momentos. Existem momentos que vocês simplesmente deseja fazer aquela “alteração de estilo” no site sem ter que fazer aquele famigerado reload da página. Então, como fazer isso sem usar AJAX?
Pode parecer simples… e é! Basicamente basta chamar a função loadCSS descrita abaixo. A função se baseia apenas no bom e velho DOM e nada mais.
function loadCSS(url) {
var lnk = document.createElement('link');
lnk.setAttribute('type', "text/css" );
lnk.setAttribute('rel', "stylesheet" );
lnk.setAttribute('href', url );
document.getElementsByTagName("head").item(0).appendChild(lnk);
}
NOTA: Só testei no IE 7 e no Firefox 2. Se alguém fizer testes em outros browsers e também funcionar avise e comente.
4 comentários
Feed de comentários deste artigo
10 maio 2008 às 16:18
CoiSA
Eu já havia criado um script equivalente para o jQuery uma vez que necessitei incluir CSS e Scripts Javascript. Na época se não me engano testei até no safari e rolou legal (teoricamente não há motivos para não funcionar em qualquer navegador, pois é basicamente tudo DOM).
Em jQuery ficaria assim:
function loadCSS(url)
{
$(document).ready(function()
var lnk = $(“);
$(“html head”).append(lnk);
});
}
O $(document).ready() serve para caso a função seja chamada no corpo do site (antes do fechamento da tag head por exemplo) ele espera o site terminar de carregar para inserir a tag link, sem causar falhas por não carregar alguma tag importante para o script que você esteja escrevendo. Você pode elaborar o script para que ele gere outras media, dependo do parâmetro, ou fazer com que ele gere tags link para javascript, etc. A alteração é bastante simples, e creio que de fácil entendimento.
19 julho 2008 às 16:48
marco souza
Coloquei um chamada de estilo em mais de um botao
no ie 6 quando tento mudar a folha de stilo novamente funciona em apenas uma parte do codigo
3 março 2009 às 12:46
Kaléu Caminha
Olá, me deparei com o seguinte problema, se logo após carregar o arquivo de uma classe eu tentar iniciá-la ocorre um erro pois o documento não foi completamente carregado.
Como vocês resolveram isso?
15 agosto 2010 às 14:26
Leo Cavalcante
Ao invés de criar uma nova tag pra cada vez que o CSS for alterado, você pode dar um id pra tag, ex.: css, resgatar com getElementById e só mudar o atributo href:
document.getElementById(“css”).href = “b.css”;