Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17635
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Alternar estilos do CSS

28-01-2007 09:20

Conheceremos nesse artigo um modo de ter vários estilos em um documento e dar a opção de alterá-lo por link ou select, você deve ter em seu documento os estilos a serem alterados, nesse exemplo vou usar 2 estilos:

<link rel="stylesheet" href="estilo1.css"> <link rel="stylesheet" href="estilo2.css">

ambos devem já estar no documento entre o tag head, o estilo2.css no caso vai ser o padrão, ou seja, o último estilo sempre vai ser o padrão para o documento.

agora usaremos o seguinte código para fazer as trocas de estilos por link ou select:

<script language="JavaScript"> <!-- var doAlerts=true; function changeSheets(whichSheet){ whichSheet=whichSheet-1; if(document.styleSheets){ var c = document.styleSheets.length; if (doAlerts) alert('Mudando para estilo '+(whichSheet+1)); for(var i=0;i<c;i++){ if(i!=whichSheet){ document.styleSheets[i].disabled=true; } else { document.styleSheets[i].disabled=false; } } } } //--> </script>

pronto, agora vou dar opção de estar trocando esses 2 estilos, por link ou por select, vamos aos códigos:

Por links:

<a href="JavaScript:changeSheets(1)">estilo 1</a> <a href="JavaScript:changeSheets(2)">estilo 2</a>

Por select:

<select onChange="changeSheets(this.value)"> <option>escolha...</option> <option value=1>1</option> <option value=2>2</option> </select>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado