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.
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.
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
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?
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”;
Valeu cara me ajudou muito! :)
Esse código salvou meu dia.
Estava entregando um conteúdo html onde não tinha acesso ao head.
O layout tinha ficado deformado por não ter carregado o CSS necessario (era um conteúdo para um produto no OpenCart).
Com esse código pude facilmente reparar isso.
Valeu !!!!