Manejo dinámico de estilos.

andrews · #1 (**permalink**) 23/10/2006, 12:33

Saludos amigos;

Acá les dejo un pequeño aporte; para aquellos que necesiten manipular de forma dinámica los estilos de los campos; espero les sea de ayuda.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<title>
		</title>
<style type="text/css">
.Campoa
{
	Font: bold 12px Trebuchet MS;
	TEXT-TRANSFORM: uppercase;
	background: "#FFE12E";
	
}

.campona
{
	Font: 12px Trebuchet MS;
	TEXT-TRANSFORM: uppercase;
	background: "#FFFFFF";
}
</style>

		<script>
		function cambiarColor(id)
		{
			document.getElementById(id).className='campoa';
		}
		
		function restablecerColor(id)
		{
			document.getElementById(id).className='campona';
		}
		</script>

</HEAD>
<BODY>
<p>
  <input class="campona" onFocus="cambiarColor('txt1');" onBlur="restablecerColor('txt1');" id="txt1" type="text">
  <input class="campona" onFocus="cambiarColor('txt2');" onBlur="restablecerColor('txt2');" id="txt2" type="text">
</p>
<p>
  <select class="campona" id="txt3" onFocus="cambiarColor('txt3');" onBlur="restablecerColor('txt3');">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</p>
<p>
  <label> Ccccccc
  <textarea class="campona" onFocus="cambiarColor('txt4');" onBlur="restablecerColor('txt4');" id="txt4">
  </textarea>
  </label>
</p>
    

    <label><br>
    Bbbbbb
      <input class="campona" name="radiobutton" type="radio" value="opción" onFocus="cambiarColor('txt5');" onBlur="restablecerColor('txt5');" id="txt5">
Opción</label>
    <br>
    <label> Aaaaa
      <input class="campona" name="radiobutton" type="radio" value="opción" onFocus="cambiarColor('txt6');" onBlur="restablecerColor('txt6');" id="txt6">
      Opción</label>

      <p>
        <input class="campona" type="checkbox" name="checkbox" value="checkbox" onFocus="cambiarColor('txt7');" onBlur="restablecerColor('txt7');" id="txt7" >
</p>
</BODY>
</HTML>

Saludos a todos....

Remsankar · #2 (**permalink**) 24/10/2006, 09:25

gracias, esto podrias ir en el FAQ

saludos

andrews · #3 (**permalink**) 07/11/2006, 11:58

Saludos amigo;

He estado trabajando en mejorar el manejo de estilos de forma dinámica a traves de la extracción de los estilos a un archivo CSS; resulta que el JS se ejecuta sin problemas pero el estilo no se cambia.

Que me puedes sugerir....????

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<title>
		</title>
<link href="/js-css/HTLL.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js-css/HTLLBV1.js"></script>
</HEAD>
<BODY>
  <input class="UDIN" onFocus="CambioC('txt1','N');" onBlur="RestableceC('txt1','ON');" id="txt1" type="text">
</BODY>
</HTML>