Alterar CSS usando JavaScript
Para muitos como eu, que buscam dar uma incrementada no site, tornando-o mais dinamico e com alguns efeitos simples, exemplo, alterar a classe de um div ao passar o mouse sobre ele (div:houver?) e vendo que esse efeito não é possível por CSS, resolvi fazer este artigo com alguns links para sites ensinando o mesmo e um exemplo usado em um site meu.
Aqui está uma lista de links mostrando como fazer as alterações no CSS usando JavaScript:
http://cauguanabara.jsbrasil.com/blog/2007/04/30/duas-questoes-sobre-javascript-e-css/
http://imasters.uol.com.br/artigo/2214/javascript/mudando_estilos_dinamicamente/
http://kraudio.wordpress.com/2007/02/09/mudar-classe-css-de-um-elemento-com-dom/
E vou lhes passar o código que ando usando em um site e uma breve explicação sobre ele:
/**
Arquivo: visual.js
Autor: Mauro Joel Schutz
Data: 17/05/2008
Descrição: JavaScript responsável por criar efeitos visuais
*/
window.onload = function ()
{
divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++)
{
if (divs[i].className == 'materia_1')
{
divs[i].onmouseover = function ()
{
this.className = 'materia_sel';
}
divs[i].onmouseout = function ()
{
this.className = 'materia_1';
}
}
if (divs[i].className == 'materia_2')
{
divs[i].onmouseover = function ()
{
this.className = 'materia_sel';
}
divs[i].onmouseout = function ()
{
this.className = 'materia_2';
}
}
}
}
O código é bem simples, a propriedade window.onload, significa que ao carregar a página a função será carregada e irá modificar os elementos div com a classe materia_1 e materia_2 e ao passar o mouse (onmouseover) ele irá modificar para a classe materia_sel e ao retirar o mouse (onmouseout) ele retorna com a classe anterior.
Bem é isso ai e bons projetos para vocês.
Se você gostou deste artigo, então veja estes...
Tutorial: AJAX (Asynchronous Javascript e XML) by Mounter on May 9th, 2008
Uma breve história
Onde usar AJAX?
O que é AJAX?
Como ele trabalha?
AJAX e DHTML
A classe XMLHttpRequest
Construindo uma requisição, passo por passo
Criando uma instância
Espera
Enviando uma requisição
Exemplos
Obtendo um texto
Obter dados por XML
Escrevendo para o body
Enviando texto pelo método POST
Usando um arquivo externo
Como construir um site em AJAX?
Desvantagens do AJAX
Especificações
Uma breve história
AJAX é somente um nome que designa uma série de ferramentas que anteriormente existiam.
Aprendendo a ser WebDesign by Mounter on June 7th, 2008
Aos que estão interessados em começar na área de WebDesign e afins, hoje pretendo dar uma pequena explicação sobre as .
Criatividade em Jogos JavaScript by Mounter on May 25th, 2008
Para quem quer ver o que é possível de se fazer em uma linguagem simples e poderosa como o JavaScript poderá ir ao site do .
Menus para seu site by Mounter on May 28th, 2008
Para quem queria ver como expor um menu popup ou flutuante em seu site, fiz aqui uma pequena lista de sites em portugues e inglês do assunto.
Google Web Toolkit by CrociDB on June 27th, 2008
Faz um tempo já que estou para postar aqui sobre a .
13 de junho de 2008 as 1:14 am
Bom, uma duvida.
Esse script fará o mesmo efeito para todas as tags ‘div’?
13 de junho de 2008 as 2:40 am
O JavaScript criado por mim só faz efeito sobre os divs que possuírem a propriedade class igual a materia_1 e materia_2.
E qualquer outra dúvida é só pedir.