Funciona cambiar color borde div

Geze · #1 (**permalink**) 07/07/2011, 23:12

Tengo el siguiente script, peor no me funciona:

Código:

<script>
function colorear(div)
  {
      var capa = document.getElementById(div);
      if(capa.style.borderColor == "#FF0000")
      {
	    capa.style.borderColor = "#FFFFFF";
	  }
	  else
	  {  
		capa.style.borderColor="#FF0000";
	  }
      
  }
</script>


<div id='caratula' style='border-color:#FF0000;'>
Votar por esta caratula?<input type='checkbox' onclick='colorear("caratula");'>
</div>

El borde debe cambiar de color al hacer click sobre le checkbox, espero me puedan ayudar; gracias!

Panino5001 · #2 (**permalink**) 08/07/2011, 03:44

Los navegadores asignan los valores a los colores de diferentes maneras. Algunos usan la notación #FF0000 para rojo, pero otros usan rgb(255,0,0). Es por eso que la comparación no siempre será válida. En tu caso quizá podría servirte algo así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
#caratula{ border-width:1px; border-style:solid}
</style>
</head>

<body>
<script>
function colorear(div,si)
  {
      var capa = document.getElementById(div);
      if(si)
      {
        capa.style.borderColor = "#FFFFFF";
      }
      else
      {  
        capa.style.borderColor="#FF0000";
      }
      
  }
</script>


<div id="caratula" style="border-color:#FF0000;">
Votar por esta caratula?<input type="checkbox" onclick="colorear('caratula',this.checked);">
</div>
</body>
</html>

ceSharp · #3 (**permalink**) 08/07/2011, 04:15

hola Geze,
aunque lo tuyo es más de CSS que de otra cosa, jejejeje.

tienes que 'inicializar' el grosor del borde para que se muestre:

<div id='caratula' style='border-color:#ff0000;border: 2px solid'>...</div>

el resto parece estar bien.

saludos.

Geze · #4 (**permalink**) 08/07/2011, 12:50

Ahora sí cabia el color del borde al seleccionar el checkbox, le único probelma es que al el div que cambia la capa tiene el siguiente CSS para cuando se ponga el punter sobre este mismo, es decir mientras puntero no toca le div tiene un color de borde blanco, cuando el puntero pasa sobre el div cambia el color a rojo. Cuando se marca la casilla y sale el puntero del div se queda con el color rojo, pero cuando se desmarca la casilla y el punero pasa sobre él ya no cambia el color a rojo.

Este es el CSS del div:

Código:

div.caratula { border: 2px solid #FFFFFF }
div:hover.caratula { border: 2px solid #FF0000; }

-----------------------------------------------------------------------
<div id="caratula" class='caratula' style="border-color:#FF0000;">
Votar por esta caratula?<input type="checkbox" onclick="colorear('caratula',this.checked);">
</div>

El problema es ese, al desmarca la casilla ya no vueleve a tener el efecto hover del css.

Ojalá me puedan ayudar y muchas, muchas gracias por lo anterior.

Panino5001 · #5 (**permalink**) 08/07/2011, 12:56

Podés usar los eventos onmouseover y onmouseout (los de los rollOvers de toda la vida) para asignarle el estilo que quieras en cada caso.

_cronos2 · #6 (**permalink**) 08/07/2011, 13:08

No estoy seguro, pero si :focus es una pseudo-clase soportada en todos los navegadores, úsala. Si no, haz lo que dice @Panino (

).
Saludos (:

Geze · #7 (**permalink**) 08/07/2011, 16:28

Gracias!! Aun que no logor hacerlo funcionar que qye agrego el onmouseover y el onmouseout sobre el <div>, pero cuando selecciono el checkbox y quito el puntero el del div, el borde se hace blanco (por el onmouseout) pero si quito este (el out) entonces al pasar el mouse sobre el div se colorea el borde y ya no se descolorea al quitarlo.

Espero me puedan ayudar :) Gracias!!