Foros del Web » Programación web » Javascript »

Modificar clase CSS con JavaScript

Estas en el tema de Modificar clase CSS con JavaScript en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/02/2007, 06:29
 
Fecha de Ingreso: mayo-2004
Ubicación: Madris!
Mensajes: 31
Antigüedad: 10 años, 2 meses
Puntos: 0
Pregunta Modificar clase CSS con JavaScript

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
__________________
______________________________
@ricardo_padrino
  #2 (permalink)  
Antiguo 26/02/2007, 08:51
Avatar de JavierB
Moderata
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.055
Antigüedad: 12 años, 5 meses
Puntos: 765
Re: Modificar clase CSS con JavaScript

Mensaje movido al foro de JavaScript desde Css.

Saludos,
  #3 (permalink)  
Antiguo 26/02/2007, 09:56
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.984
Antigüedad: 12 años, 7 meses
Puntos: 58
Re: Modificar clase CSS con JavaScript

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!
__________________
Cómo escribir|Economia Finanzas Peru
No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #4 (permalink)  
Antiguo 26/02/2007, 10:04
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.984
Antigüedad: 12 años, 7 meses
Puntos: 58
Re: Modificar clase CSS con JavaScript

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!
__________________
Cómo escribir|Economia Finanzas Peru
No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #5 (permalink)  
Antiguo 26/02/2007, 14:30
 
Fecha de Ingreso: mayo-2004
Ubicación: Madris!
Mensajes: 31
Antigüedad: 10 años, 2 meses
Puntos: 0
Re: Modificar clase CSS con JavaScript

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
__________________
______________________________
@ricardo_padrino
  #6 (permalink)  
Antiguo 20/05/2008, 04:28
 
Fecha de Ingreso: abril-2008
Mensajes: 9
Antigüedad: 6 años, 3 meses
Puntos: 0
Respuesta: Modificar clase CSS con JavaScript

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!
  #7 (permalink)  
Antiguo 20/05/2008, 06:12
Avatar de JavierB
Moderata
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.055
Antigüedad: 12 años, 5 meses
Puntos: 765
Respuesta: Modificar clase CSS con JavaScript

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

Saludos,
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 08:25.
SEO by vBSEO 3.3.2