2010-01-19 32 views
7

Soy nuevo en JavaScript. Desarrollé una página usando JavaScript de tal manera que cuando selecciono un color, se aplica a toda la página como fondo.Cambiar el color del texto onclick

Quiero desarrollar una página donde puedo cambiar solo el color del texto. Debería cambiarse (de rojo a verde o algo así), pero la página no debería actualizarse, y solo deberían cambiarse los contenidos o el color del texto seleccionado.

¿Alguien puede ayudarme en esto. ¿Alguna idea de cómo desarrollarla? Gracias por adelantado.

Respuesta

4

Una reescritura de la respuesta por Sarfraz sería algo como esto, creo:

<script> 

    document.getElementById('change').onclick = changeColor; 

    function changeColor() { 
     document.body.style.color = "purple"; 
     return false; 
    } 

</script> 

Se podría o bien tiene que poner este script en el En la parte inferior de la página, justo antes de la etiqueta de cierre del cuerpo, o ponga la asignación del controlador en una función llamada onload - o si está usando jQuery, está el muy elegante $(document).ready(function() { ... });

Tenga en cuenta que cuando asigna manejadores de eventos de esta manera, quita la funcionalidad de su HTML. También tenga en cuenta que lo establece igual al nombre de la función - no(). Si lo hizo onclick = myFunc();, la función se ejecutará realmente cuando se configure el controlador.

Y tengo curiosidad: ¿sabía lo suficiente como para guiar el cambio de color de fondo, pero no el color del texto? extraño :)

+0

peso im tratando de hacer es cambiar el color del texto llamando el problema páginas css .. im frente en ese ..i hemos creado tres diferentes Css páginas ... pero al hacer clic en la primera página .css que he llamado se muestra pero n ot otros. he llamado a todos los tres archivos .css también ... – Patel

+0

@patel Eso sería muy útil para incluir en la pregunta original. Debe editarlo para incluir ese pequeño tid-bit importante. –

4

hacer algo como esto:

<script> 
function changeColor(id) 
{ 
    document.getElementById(id).style.color = "#ff0000"; // forecolor 
    document.getElementById(id).style.backgroundColor = "#ff0000"; // backcolor 
} 
</script> 

<div id="myid">Hello There !!</div> 

<a href="#" onclick="changeColor('myid'); return false;">Change Color</a> 
+0

-1 Para uso ineficiente de 'document.getElementById (id)' y registro de evento problemático –

+0

@Justin: ¿Sería genial si pudieras explicar qué es ineficiente allí? Sería genial si pudiera aprender. Cualquier enlace que pueda proporcionar por favor? – Sarfraz

+0

Lo mejor es evitar el DOM tanto como sea posible, por lo que querrá hacer la menor cantidad posible de llamadas a métodos como 'document.getElementById'. En cuanto al registro de eventos, generalmente se considera mala forma mezclar la presentación y la lógica. Se puede leer más sobre esto aquí: http://www.quirksmode.org/js/events_early.html –

Cuestiones relacionadas