Foros del Web » Programando para Internet » Javascript »

Cambiar Propiedades Css con JavaScript

Estas en el tema de Cambiar Propiedades Css con JavaScript en el foro de Javascript en Foros del Web. Buenas tardes a todos. Soy nuevo en el foro y también en todo sobre programación. Estaba intentando hacer un efecto para una página web en ...
  #1 (permalink)  
Antiguo 18/08/2015, 16:57
 
Fecha de Ingreso: agosto-2015
Mensajes: 3
Antigüedad: 8 años, 7 meses
Puntos: 0
Pregunta Cambiar Propiedades Css con JavaScript

Buenas tardes a todos.

Soy nuevo en el foro y también en todo sobre programación.
Estaba intentando hacer un efecto para una página web en el que al darle click sobre una etiqueta div, que por defecto tiene color azul como fondo, cambiara a amarillo, luego otro click y a rojo, luego otro click y a verde y luego click y azul de nuevo. el codigo html que tengo es el siguiente:

Código HTML:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Estilos CSS</title>
	<link rel="shortcut icon" href="imagenes/icono2.gif"/>
	<link rel="stylesheet" href="estilos.css">
	<script type="text/javascript" src="script.js"></script>
</head>
<body onload="darColor()">
	<div id="encabezado" onclick="cambiarColor()">
		<h1>¡ Leer es vivir !</h1>
	</div>
	<ul id="menu">
	  <li id="azul"><a href="#">INICIO</a></li>
	  <li id="amarillo"><a href="#">PÁGINA 1</a></li>
	  <li id="rojo"><a href="#">PÁGINA 2</a></li>
	  <li id="verde"><a href="#">NOSOTROS</a></li>
	</ul>
	
</body>
</html> 
Y el escript es este:

Código:
function darColor(){
			document.getElementById("encabezado").style.backgroundColor = "blue";
}

function cambiarColor(){
	if (document.getElementById("encabezado").style.backgroundColor == "blue"){
		document.getElementById("encabezado").style.backgroundColor = "yellow";
	}
	else if (document.getElementById("encabezado").style.backgroundColor == "yellow"){
		document.getElementById("encabezado").style.backgroundColor = "red";	
	}
	else if (document.getElementById("encabezado").style.backgroundColor = "red"){
		document.getElementById("encabezado").style.backgroundColor = "lime";	
	}
	else if (document.getElementById("encabezado").style.backgroundColor = "lime"){
		document.getElementById("encabezado").style.backgroundColor = "blue";	
	}
}
Bueno, lo que sucede es que pasa bien hasta que llega al color Lime, pero cuando doy click no regresa al color azul

Si alguien puede ayudarme desde ya muchas gracias! Saludos
  #2 (permalink)  
Antiguo 18/08/2015, 17:15
Avatar de MaNuX0218  
Fecha de Ingreso: marzo-2014
Mensajes: 787
Antigüedad: 10 años
Puntos: 67
Respuesta: Cambiar Propiedades Css con JavaScript

Que intentas hacer, cambiar el color automaticamente o cambiarlo cada vez que haces clic con el ratón(cosa que lo que estas haciendo).

Saludos.
__________________
No te preocupes si tu código no funciona bien. Si todo lo hiciera, no tendrías trabajo.
  #3 (permalink)  
Antiguo 18/08/2015, 17:21
 
Fecha de Ingreso: agosto-2015
Mensajes: 3
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Cambiar Propiedades Css con JavaScript

Gracias por tu ayuda. En efecto trato de que cambie de color con cada click, y funciona bien hasta que debe pasar del color lime al azul.

La secuencia sería: azul-amarillo-rojo-verde
  #4 (permalink)  
Antiguo 19/08/2015, 04:02
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: Cambiar Propiedades Css con JavaScript

Se puede hacer de bastantes formas, ésta es la más efectiva para mi gusto ya que no necesita condiciones:

Código Javascript:
Ver original
  1. var colores  = ['blue','yellow','red','lime'],
  2.     index = 0;
  3.  
  4. function cambiar(){
  5.   elemento.style.backgroundColor = colores[(index++ % colores.length)];
  6. }
  #5 (permalink)  
Antiguo 19/08/2015, 18:47
 
Fecha de Ingreso: agosto-2015
Mensajes: 3
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Cambiar Propiedades Css con JavaScript

Muchas gracias PHPeros! Funcionó perfectamente.

Solo a modo de conocimiento general, ¿Qué era lo que causaba error en el código que había escrito?
  #6 (permalink)  
Antiguo 20/08/2015, 03:28
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: Cambiar Propiedades Css con JavaScript

Pues el error es que has usado = en vez de == en los dos últimos ifs, por lo tanto se quedaba atascado. Pero puedes ver que corregido funciona sin problema.

Etiquetas: css, programa, programación-general, propiedades
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.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:07.