Ir para conteúdo
Entre para seguir isso  
Dean

Modificando estilos através de js

Recommended Posts

Dean    1
Dean

Bom, primeiro queria parabenizar o Rhys e todos que apoiaram para que essa seção fosse criada.Esse é meu primeiro tutorial, não sei se posto aqui ou em outras linguagens, algumas coisas estão aqui outras lá, mas isso os moderadores decidem.Esse tutorial não está muito bom porquê fiz ontem a noite com sono, mas se alguém não entender fala que eu arrumo.

 

Modificando estilos através de javascript

 

Chega de conversa e vamos iniciar o tutorial, se você não tem um pouco de conhecimento em javascript vai ficar meio complicado, recomendo ler as aulas do bajt ou esse tutorial:http://forums.otserv.com.br/f45/curso-de-javascript-10946/.

 

A função que modifica estilos é simples, você pode usá-la assim:

 

document.getElementById('NomeDoElemento').style.nomeDoEstilo = propriedade;

Agora,explicando:

document.getElementById('NomeDoElemento')

Vamos dizer que "identifica" o objeto que será transformado.

style.nomeDoEstilo = propriedade;

= Os estilos você pode verificar aqui: http://codepunk.hardwar.org.uk/css2js.htm, em propriedade vai o que você quer atribuir, por exemplo, se modificasse o estilo backgroundColor, a propriedade seria o código da cor para qual queira mudar.

 

Para dar de exemplo, fiz uma página igual o sistema do baixaki demonstrado no outro tutorial, porém esse é em javascript e não em flash:

[spoiler=Código]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function mudar(cor){
document.getElementById('apDiv1').style.backgroundColor = cor;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
   background:#F00;
   position:absolute;
   left:72px;
   top:65px;
   width:391px;
   height:204px;
   z-index:1;
}
#apDiv5 {
   background:#FF0;
   position:absolute;
   left:170px;
   top:269px;
   width:97.75px;
   height:50px;
   z-index:1;
}
#apDiv4 {
   background:#00F;
   position:absolute;
   left:268px;
   top:269px;
   width:97.75px;
   height:50px;
   z-index:1;
}
#apDiv3 {
   background:#0F0;
   position:absolute;
   left:366px;
   top:269px;
   width:97.75px;
   height:50px;
   z-index:1;
}
#apDiv2 {
   background:#F00;
   position:absolute;
   left:72px;
   top:269px;
   width:97.75px;
   height:50px;
   z-index:1;
}
-->
</style>
</head>

<body>
<div id="apDiv1"></div>
<div id="apDiv2" onmouseover="mudar('#F00')"></div>
<div id="apDiv3" onmouseover="mudar('#0F0')"></div>
<div id="apDiv4" onmouseover="mudar('#00F')"></div>
<div id="apDiv5" onmouseover="mudar('#FF0')"></div>
</body>
</html>

 

 

Qualquer dúvida é só perguntar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Faça login para comentar

Você vai ser capaz de deixar um comentário após fazer o login



Entrar Agora
Entre para seguir isso  

  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.

×