Jump to content



Photo

Alterar Classe Css


  • Please log in to reply
2 replies to this topic

#1 marceloplis

marceloplis

    Novato no fórum

  • Usuários
  • 12 posts
  • Sexo:Não informado

Posted 27/10/2006, 14:59

Pessoal, gostaria de saber se tem como fazer, por meio do JavaScript, a alteração de atributos de uma classe do meu css, por exemplo:


   (CSS)
	.cor{
		  background :#FFFFFF;
		  color		   :#000000;
	}

   
   (JavaScript)  ?????  Fazer algo assim:
   function muda(){
		 var classe = class.cor;
		 if( classe.background == #FFFFFF){
			  classe.backgraund = #000000;
			  classe.color		   = #FFFFFF;
		 }else{
			  classe.background = #FFFFFF;
			  classe.color		   = #000000;
		 }
  }

   (JSP)
   <input type="button" onclick="muda();">
   <div class="cor"></div>
   <div></div>
   <div class="cor"></div>
   <div></div>  
	

Gostaria de uma função que ao clicar no botão mudaria o valor dos atributos de uma classe CSS, assim todos meu elementos que estão usando esta classe sofreriam esta alteração.

Edited by marceloplis, 27/10/2006, 16:31.

  • 0

#2 bdoweb

bdoweb

    Super Veterano

  • Usuários
  • 1641 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 27/10/2006, 16:23

pq naum muda a class de todo o elemento ....

document.getElementById("elemento").className = "novaClasseCSS";


[]'s
  • 0
Quer ajuda seus amigo e ainda ganhar uma graninha?
Acesse agora mesmo http://yeapiz.com

#3 marceloplis

marceloplis

    Novato no fórum

  • Usuários
  • 12 posts
  • Sexo:Não informado

Posted 27/10/2006, 16:42

Cara, funcionou, mas não exatamente do jeito que eu gostaria. Veja o código abaixo:

eu gostaria que funcionasse como se estivesse usando a propriedade "display: none|block", mas este qdo executado no Firefox ou Opera bagunça a tabela, no IE fica certinho, mas vendo as especificações da W3C a propriedade "display: none|block" não deve ser usado em colunas de tabela <td>.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">

.oculto{
	visibility	: hidden;
}

.exibe{
	visibility	: inherit;
	background	: #C0C0C0;
	color		: #FFFFFF; 
}

</style>
<title>Table Collum</title>
</head>
<body>
	<script language="javascript">
		function showContent(){
			var par  = document.getElementById("mytable");
			var tds  = par.getElementsByTagName("td");
			for(x = 0; x < tds.length; x++){
				if(tds[x].id == "esc"){
					if(tds[x].className == "oculto"){
						tds[x].className = "exibe";
					}else{
						tds[x].className = "oculto";
					}
				}
			}
		}
	</script>
	
	<input type="button" value="Teste" onclick="showContent();">
	<table id="mytable">
		<tr>
			<td>Coluna 1</td>
			<td>Coluna 2</td>
			<td id="esc" class="oculto">Coluna 3</td>
			<td id="esc" class="oculto">Coluna 4</td>
			<td>Coluna 5</td>
		</tr>
		<tr>
			<td>Coluna 1</td>
			<td>Coluna 2</td>
			<td id="esc" class="oculto">Coluna 3</td>
			<td id="esc" class="oculto">Coluna 4</td>
			<td>Coluna 5</td>
		</tr>
		<tr>
			<td>Coluna 1</td>
			<td>Coluna 2</td>
			<td id="esc" class="oculto">Coluna 3</td>
			<td id="esc" class="oculto">Coluna 4</td>
			<td>Coluna 5</td>
		</tr>
		<tr>
			<td>Coluna 1</td>
			<td>Coluna 2</td>
			<td id="esc" class="oculto">Coluna 3</td>
			<td id="esc" class="oculto">Coluna 4</td>
			<td>Coluna 5</td>
		</tr>
		<tr>
			<td>Coluna 1</td>
			<td>Coluna 2</td>
			<td id="esc" class="oculto">Coluna 3</td>
			<td id="esc" class="oculto">Coluna 4</td>
			<td>Coluna 5</td>
		</tr>
		<tr>
			<td>Coluna 1</td>
			<td>Coluna 2</td>
			<td id="esc" class="oculto">Coluna 3</td>
			<td id="esc" class="oculto">Coluna 4</td>
			<td>Coluna 5</td>
		</tr>		
	</table>
</body>
</html>

  • 0




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq