Modificar clase CSS con JavaScript

Padri · #1 (**permalink**) 26/02/2007, 07:29

Hola a todos! Tengo un problema que a ver si alguien sabe como se puede hacer xq no lo consigo encontrar...

Mirar, el tema es q yo quiero modificar una clase CSS con JavaScript, pero no cambiar a un elemento de clase. Imaginaros que tenemos un listado de mensajes de diferentes usuarios (intercalados con otros mensajes de otros usuarios), vale? Pues en un determinado momento, quiero ver solo los mensajes de una persona y tengo una clase CSS para cada persona, entonces me bastaría con cambiar la visibilidad de la clase asociada a esa persona!

A mi me suena que habia una forma de cambiar una clase CSS con JavaScript pero no lo encuentro...

Please, help!!! jajaja

Saludos

Padri

JavierB · #2 (**permalink**) 26/02/2007, 09:51

Mensaje movido al foro de JavaScript desde Css.

Saludos,

KarlanKas · #3 (**permalink**) 26/02/2007, 10:56

Dime si este ejemplo tonto te sirve:

Código:

<html>
<head>
	<title>Untitled</title>
	<style>
	/* Esta es la primera hoja de estilo de la pagina, luego es la hoja numero 0 */
	div{
	/*Regla numero 0 */
	margin-top:5px;
	width:500px;
	font:normal 10px/15px verdana;
	padding:10px;}
	
	.pepe{
	/*Regla numero 1 */
	color:red;
	display:block;
	border:solid 1px #d0d0d0;
	background:#ffffcc;
	}
	
	.juan{
	/*Regla numero 2*/
	color:blue;
	display:block;
	border:solid 1px #d0d0d0;
	background:#ccffff;
	}
	</style>
</head>

<body>

<div class="pepe">Hola, soy Pepe</div>
<div class="juan">Pues yo soy Juan</div>
<div class="pepe">Qu&eacute; tal, Juan?</div>
<div class="juan">Muy bien &iquest;y t&uacute;?</div>
<div class="pepe">No me quejo.</div>
<div class="juan">&iexcl;Haces bien!</div>

<br>
<input type="button" value="quitar a Juan" onclick="document.styleSheets[0].rules[2].style.display='none'" >
<input type="button" value="poner a Juan" onclick="document.styleSheets[0].rules[2].style.display='block'" >
<br>
<br>

<input type="button" value="quitar a Pepe" onclick="document.styleSheets[0].rules[1].style.display='none'" >
<input type="button" value="poner a Pepe" onclick="document.styleSheets[0].rules[1].style.display='block'" >



</body>
</html>

creo que se explica por sí mismo, pero si no lo entiendes pregunta y gustosamente te lo explico.

Un saludo!

KarlanKas · #4 (**permalink**) 26/02/2007, 11:04

Para que sea compatible tb con Firefox he hecho este pequeño cambio:

Código:

<html>
<head>
	<title>Untitled</title>
	<style>
	/* Esta es la primera hoja de estilo de la pagina, luego es la hoja numero 0 */
	div{
	/*Regla numero 0 */
	margin-top:5px;
	width:500px;
	font:normal 10px/15px verdana;
	padding:10px;}
	
	.pepe{
	/*Regla numero 1 */
	color:red;
	display:block;
	border:solid 1px #d0d0d0;
	background:#ffffcc;
	}
	
	.juan{
	/*Regla numero 2*/
	color:blue;
	display:block;
	border:solid 1px #d0d0d0;
	background:#ccffff;
	}
	</style>
	<script>
	cosa=(navigator.appName.indexOf("Microsoft")!=-1)?document.styleSheets[0].rules:document.styleSheets[0].cssRules;
	</script>
</head>

<body>

<div class="pepe">Hola, soy Pepe</div>
<div class="juan">Pues yo soy Juan</div>
<div class="pepe">Qu&eacute; tal, Juan?</div>
<div class="juan">Muy bien &iquest;y t&uacute;?</div>
<div class="pepe">No me quejo.</div>
<div class="juan">&iexcl;Haces bien!</div>

<br>
<input type="button" value="quitar a Juan" onclick="cosa[2].style.display='none'" >
<input type="button" value="poner a Juan" onclick="cosa[2].style.display='block'" >
<br>
<br>

<input type="button" value="quitar a Pepe" onclick="cosa[1].style.display='none'" >
<input type="button" value="poner a Pepe" onclick="cosa[1].style.display='block'" >



</body>
</html>

Un saludo!

Padri · #5 (**permalink**) 26/02/2007, 15:30

Si

, es eso KarlanKas, muuuuxas gaxias!!!!

Tengo otra preguntilla, a partir de q versiones furula? Y otra más importante, sabes de alguna web donde haya un listado de objetos del DOM (o la forma de acceder a los elementos HTML para navegadores antiguos) q interpreta cada navegador (y correspondiente versión)?

Es conocido por todos q no todos los navegadores interpretan por completo las definiciones del DOM o antes de que se definiera el estandar, cada navegador hacia las cosas como es salia de los...., entonces, por hacer las cosas compatibles con los anteriores navegadores te tienes que quebrar la cabeza de mala manera...

Un saludo!

Padri

Ose_hash · #6 (**permalink**) 20/05/2008, 04:28

Otra solución;
Si lo que se desea es cambiar los estilos ya predefinidos de manera dinámica

document.getElementById('objeto').className="NombredeEstilo";

Esto me venia mejor.
Saludos!

JavierB · #7 (**permalink**) 20/05/2008, 06:12

El mensaje original es de hace más de un año. Por favor, no reviváis temas tan antiguos.

Saludos,