Feeds
Newsletter
Mudando estilos dinamicamente
Objetivo
Mostrar como uma combinação simples de JavaScript com CSS pode fornecer uma opção para o visitante de uma página web mudar a cor ou a imagem do fundo da página ou mesmo a estilização de qualquer elemento HTML, tanto através de um link como de um botão.
Ao final da leitura desse artigo você estará capacitado a colocar um botão ou um link na sua página web que ao ser clicado muda as características do fundo da página ou de qualquer elemento HTML definido por você.
O JavaScript que faz a mudança
O disparador do evento no código JavaScript
é o handler de evento onclick
da linguagem.
O comando que identifica qualquer elemento HTML na página
é: document.getElementById(
). E, a mudança do fundo faz-se em style.background='#xxxxxx';
Juntando tudo resulta a linha do código
JavaScript:
onclick="document.getElementById(
).style.background='#xxxxxx';"
Estruturando os códigos HTML e JavaScript para mudança de cor
Primeiramente atribuímos uma id para o elemento body cujo fundo queremos mudar: Escolhi o nome bg para a id
<body id="bg">
Criamos em nosso HTML um link de texto clicável, para disparar o JavaScript.
- Criar um link "morto": <a href="javascript://;>UMA COR</a>
E a seguir atribuimos o javascript ao link:
<a href="javascript://; onclick="document.getElementById( 'bg').style.background='#CCCCCC';">Mudar a cor para CINZA </a>
Veja aqui o efeito da aplicação deste JavaScript em uma página.
Como você constatou no exemplo acima, trata-se de uma página com fundo branco que você muda para cinza com um click em um link. Mas e se o visitante não gostar da cor cinza e resolver voltar para a cor branca inicial (default)? Você terá que fornecer um outro link para voltar á cor inicial ou default.
Veja aqui com o acréscimo do link para voltar à cor original.
A colocação de uma imagem de fundo
Assim como você muda a cor do fundo da página, usando essa mesma tácnica poderá colocar uma imagem de fundo.
O código JavaScript é mostrado abaixo:
<a href="javascript://; onclick="document.getElementById( 'bg').style.background='#D2DED4 url(caminho/imagem.gif) left top no-repeat';">UMA IMAGEM </a>
Veja aqui o efeito da aplicação deste JavaScript em uma página.
Nota: Você poderá colocar a imagem em qualquer posição na tela, com ou sem repetição, fixa ou scroll, em fim tirar proveito de todos os valores CSS previstos para a propriedade background. Saiba mais sobre a propriedade background neste tutorial.
Com botões
Se você preferir um botão no lugar de um link de texto o código é este:
<p><button onclick="document.getElementById( ).background='#xxxxxx';" >COR</button></p>
Veja aqui o efeito com botões em uma página.
Por que getElementById( )?
O código JavaScript mostrado:
onclick="document.getElementById( ).background='#xxxxxx';"
Pode ser substituido por este:
onclick="document.body.style.background='#xxxxxx';"
E neste caso não haverá necessidade de definir uma id para <body> pois o código já está "dizendo" que o estilo deverá ser aplicado ao elemento <body>.
Usei getElementById( ) propositadamente, pois este comando permite a você agir dinamicamente sobre qualquer elemento HTML com uma id definida em sua página e não só no <body>, tornando-se assim uma opção bem mais ampla para aplicação de estilos dinamicamente.
Veja aqui um exemplo de aplicação do código em outros elementos HTML de uma página.
Conclusão
Como você já deve ter percebido é possível dinamicamente com esta simples linha de código JavaScript alterar estilos nos elementos HTML de uma página.
E, uma dica final:
Para se escrever uma propriedade CSS composta no código JavaScript, retire o hífen da propriedade e escreva a segunda palavra começando com maiúscula.
Por exemplo:
para alterar font-size,
escreva fontSize;
para alterar margin-bottom, escreva
marginBottom;
para alterar border-top-color, escreva
borderTopColor;
e assim por diante.
Observe:
onclick="document.getElementById( ).borderTopColor='#xxxxxx';"
Descubra a versatilidade
das CSS
Projete conforme as Web Standards.
Um abraço e até a próxima.
Interação
5 comentários
Talitha
05/07/2004 12h02
Vamos lá...
..Só lembrando que o getElementById NÃO funciona em todos os navegadores (especialmente os mais antigos), então o ideal é fazer uma função no JavaScript que retorne o objeto de acordo com o navegador pra poder incluir no código o conceito de cross-browser.
....[]s
Talitha
05/07/2004 12h03
Link morto
..O link "morto" está incorreto. Faltou fechar as aspas. E o ideal é usar um "javascript:;" e não fazer um comentário em branco.
....[]s
Severino Holanda da Silva Filh
06/07/2004 05h57
Valews
Eu estava procurandu esse script a muito tempo... Obrigado pela ajuda ae Maurício! Valews mesmo.
Denis Carlos Luckner
22/08/2004 21h56
Com HREF não consigo...
Com um link HREF, não consigo trocar a imagem de fundo. Ou melhor, até consigo, mas preciso clicar no link duas vezes para funcionar.
O que está errado?
Klaus Roberto de Paiva
04/02/2005 11h13
Trocar o CSS via script
Como mudar as cores de uma página ao precionar a tecla F5 ou simplesmente dar um refresh na página?
Na verdade é exatamente isso que ocorre nete Site:
http://www.basf.com.br
Alguém saberia me dizer como devo proceder para obter esse efeito?
Desde já agradeço!
iMasters
- Sobre o iMasters
- Política de privacidade
- Anuncie
- Feeds iMasters
- Fóruns iMasters
- Fale conosco
2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.