Cambiar a varios colores en css y js

gonya707 #1 Ene '14 Moderador

Buenas tardes. Soy consciente de que esto es probable que sea una duda muy tonta y basica pero por mas que busco como hacerlo no lo consigo.

La cosa es que tengo un div y cuando lo pulso quiero que cambie de color. Supongamos que inicialmente es negro, pues:

negro click rojo click verde click negro click rojo ...

Y asi sucesivamente.

Lo que se me ha ocurrido hasta ahora fue llamar a una funcion en el onclick asi:

<div class="foo" onclick="changeColor(this);">

y la funcion changeColor es la siguiente:

function changeColor(element){
	var color=element.style.backgroundColor;
	
switch (color){
	case '#000000':
		element.style.backgroundColor= '#FF0000';
	break;
	
	case '#FF0000':
		element.style.backgroundColor= '#00FF00';
	break;
	
	case '#00FF00':
		element.style.backgroundColor= '#000000';
	break;
}
}

Intentando depurar con alerts veo que si que llega a la funcion pero si imprimo la variable 'color' el alert me sale vacio, asi que no debe de estar comparando bien color con '#000000' y el resto de valores

Alguna idea?

Wasd #2 Ene '14

Aunque los setees como '#xxxxxx' los devuelve como rgb(xxx, xxx, xxx)

1 respuesta

gonya707 #3 Ene '14 Moderador

#2 entonces hay alguna manera de hacer un getR() getG() y getB() del div por asi decirlo?

1 respuesta

Wasd #4 Ene '14

#3 El camino fácil es usar directamente el modo rgb(x, x, x), es decir, hacerlo asi:

case 'rgb(0, 0, 0)':
                        element.style.backgroundColor= 'rgb(0, 255, 0)';

Si no te queda otra que usar el hexadecimal, tienes funciones como

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

Fuente: http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb

Lo que pides en #3 se puede hacer, pero lo que te he puesto arriba es más fácil. Verifica si te funciona así.

1 respuesta

gonya707 #5 Ene '14 Moderador

#4 no es necesario usar hexadecimales, no hay problema.

Sigue sin funcionar me temo He empezado a sospechar de la comilla simple pero tampoco funciona con comillas dobles. Estoy probando con cases asi:

		case "rgb(0, 0, 0)":
			alert("el color era negro");
			element.style.backgroundColor= "rgb(255, 0, 0)";
		break;

pero nada.

gonya707 #6 Ene '14 Moderador

acabo de comprobar que

var color=element.style.backgroundColor;

me devuelve una string vacia. Esto de aqui me devuelve true:

color ===  ""

Y esto false

color ===  "rgb(0, 0, 0)"

1 respuesta

Wasd #7 Ene '14

#6 Quita el punto y coma del html

1 respuesta

gonya707 #8 Ene '14 Moderador

#7 No ha funcionado pero lo he arreglado de una manera rarisima.

La cosa es que la primera vez que llega a la funcion el element.style.backgroundColor; devuelve una string vacia, si le digo que =="" me lo cambia a verde cambia, luego idem a rojo, y de rojo pasa a negro. Ahora que vuelve a estar en negro la comparacion con "" falla y la de rgb(0,0,0) funciona.

En fin muchisimas gracias. Dios te lo pague con muchos hijos, o muchos intentos

1 respuesta

Wasd #9 Ene '14

#8 Si, es normal. Ponle un style="background-color: rgb(0, 0, 0)" por defecto al html y ya no te pasará, podrás eliminar el =="". Si quieres un código más eficiente y escalable puedes usar arrays. Si no sabes dímelo y te lo preparo.

1 respuesta

gonya707 #10 Ene '14 Moderador

#9 Efectivamente con el style picado a fuego en el html se soluciona. Me viene de perlas porque iba a ser un dolor de muelas dar distintos colores para onmouseover con lo de la string vacia.

No es necesario optimizar mucho, es una pagina que por los pelos es html plano, asi que no creo que haya ningun problema a no ser que se abra con internet explorar 1.0 y un ordenador del pleistozeno, pero gracias!

MegalomaniaC #11 Ene '14

Yo lo haria con un addClass o toggleClass de jquery y un contador, tan simple como:

http://api.jquery.com/toggleclass/

La funcion se activa con el click, tienes el contador, count++ por ejemplo (busca el ejemplo que hay ahi mismo para el subrayado rojo con clicks), y le dices que si count == 1, sea el color x, si count == 2, sea el color y, etc.

SkOi #12 Ene '14 Inocente

Yo lo que haría es tener un .css con las 4 clases que quieres y en la función con el switch poner esto:

//si no pasas nada por parámetro
document.getElementById("MyElement").className = "rojo";

//si lo pasas
element.className = "rojo";

Cambiar a varios colores en css y js

Usuarios habituales

Tags