LOGIN:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Terça-feira, 29/06/2004 - 01:59 - Por Mauricio Samy
Seções relacionadas:

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.

Todos os artigos de Mauricio Samy

5 comentários publicados

  • 1. Vamos lá...

    Segunda-feira, 05/07/2004, por Talitha

    ..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

    Responder comentário

  • 2. Link morto

    Segunda-feira, 05/07/2004, por Talitha

    ..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

    Responder comentário

  • 3. Valews

    Terça-feira, 06/07/2004, por Severino Holanda da Silva Filh

    Eu estava procurandu esse script a muito tempo... Obrigado pela ajuda ae Maurício! Valews mesmo.

    Responder comentário

  • 4. Com HREF não consigo...

    Domingo, 22/08/2004, por Denis Carlos Luckner

    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?

    Responder comentário

  • 5. Trocar o CSS via script

    Sexta-feira, 04/02/2005, por Klaus Roberto de Paiva

    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!

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Mauricio Samy é Engenheiro Civil formado pelo IME, ex-Professor de Geometria Descritiva e Matemática, autodidata em CSS e administrador do site www.maujor.com.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.