| jesuli | Fecha: Martes, 2010-04-20, 2:35 PM | Mensaje # 1 |
Teniente
Grupo: Administradores
Mensajes: 77
Estatus: Offline
| cambiar el color de texto de un div con un clic del ratón
en este ejemplo voy a mostrar como cambiar el color de texto de un div, aunque también no sirve para o casi cualquier contenedor, como tablas con un simple clic de raton sin actualizar para nada la pagina.
Para esto tendremos que usar javacript y como veremos es bastante sencillo en primer lugar copia y pega el siguiente código entre entre la etiqueta <body> </body>.
<script language="javascript" type="text/javascript">
//<!--
function CambiarColorTextoDiv(id, ColorCambiar)
{
theid = document.getElementById(id);
theid.style.color= ColorCambiar;
}
//-->
</script>
el script solo tiene una única función llamada CambiarColorTextoDiv() que tiene 2 parámetro el primer parámetro es el identificación id de div a que vamos a modificar el color de la letra de su texto, el segundo parámetro es el color que vamos a reeplazar por el origina.
El siguiente paso el utilizar el script para este ejemplo voy a crear un vinculo normal y un div que tiene un poco de texto de la siguiente manera
<a href="javascript:;" onclick="CambiarColorTextoDiv('wscolor', '#ff0000');return false;" title="Cambiar el color ">Cambio de texto a Rojo</a>
<br />
<div style="display:block; padding:4px; border:1px solid #CCCCCC;" id="wscolor"><p>Este texto se cambiará al color del enlace de arriba. La página no se actualizará.</p></div>
como podéis nota es creado un enlace un poco confuso <a href="javascript:;" que como atributos lleva javascript:; con esto se consigue que me comunique cuando se a echo click y se dispare el evento onclick de javacript.
Código completo
<html>
<body>
<script language="javascript" type="text/javascript">
//<!--
function CambiarColorTextoDiv(id, ColorCambiar)
{
theid = document.getElementById(id);
theid.style.color= ColorCambiar;
}
//-->
</script>
<a href="javascript:;" onclick="CambiarColorTextoDiv('wscolor', '#ff0000');return false;" title="Cambiar el color ">Cambio de texto a Rojo</a>
<br />
<div style="display:block; padding:4px; border:1px solid #CCCCCC;" id="wscolor"><p>Este texto se cambiará al color del enlace de arriba. La página no se actualizará.</p></div>
</body>
</html>
aquí un ejemplo de los explicado
Cambio de texto a Rojo
Este texto se cambiará al color del enlace de arriba. La página no se actualizará. |
[center] [/center]
http://www.codigocero.ucoz.es
|
| |
| |
