Cambiar color de fondo a tu gusto mediante un botón

yopmail · #1 (**permalink**) 08/01/2017, 05:30

Hola, os dejo un codigo muy interesante para cambiar el color del fondo con botones:

Código PHP:

  <HTML> 
<HEAD> 
 
<!-- Código descargado gratuitamente de HTMLpoint, el sitio italiano del web publishing 
                                   http://www.htmlpoint.com --> 
 
<TITLE>Ejemplos Javascript: ejemplo práctico </TITLE> 
 
 
 
</HEAD> 
 
<BODY bgcolor="white"> 
 
  
 
<SCRIPT LANGUAGE="JavaScript"> 
 
 
    function sfondo(colore) {document.bgColor = colore;} 
 
 
</script> 
 
 
 
<CENTER><FORM> 
 
 
<INPUT TYPE="button" VALUE="Rosso" onClick="sfondo('RED')"> 
 
<INPUT TYPE="button" VALUE="Blue" onClick="sfondo('BLUE')"> 
 
<INPUT TYPE="button" VALUE="Arancio" onClick="sfondo('ORANGE')"> 
 
<INPUT TYPE="button" VALUE="Verde" onClick="sfondo('GREEN')"> 
 
<INPUT TYPE="button" VALUE="Nero" onClick="sfondo('BLACK')"> 
 
<INPUT TYPE="button" VALUE="Grigio" onClick="sfondo('GRAY')"> 
 
<INPUT TYPE="button" VALUE="Giallo" onClick="sfondo('YELLOW')"> 
 
<INPUT TYPE="button" VALUE="bianco" onClick="sfondo('WHITE')"> 
 
</FORM> 
 
 
</body> 
</html>

Una pregunta.. alguien conoce algun código que pueda cambiar tanto el color del fondo como el color de texto ? (de otro color) con un solo clic?

Todos los códigos que he mirado, solo se puede o bien cambiar el texto o solo se puede cambiar el fondo..

Gracias :)

mpozo · #2 (**permalink**) 08/01/2017, 07:38

Lee este artículo https://developer.mozilla.org/es/doc...LElement/style

caricatos · #3 (**permalink**) 08/01/2017, 08:25

Hola:

Tal vez sea mejor en vez de usar botones, usar una paleta... con bucles anidados puede generarse una (o con otros métodos).

Te paso una referencia: Todo sobre los colores.

Saludos

yopmail · #4 (**permalink**) 08/01/2017, 08:39

Cita:

Iniciado por caricatos

Hola:

Tal vez sea mejor en vez de usar botones, usar una paleta... con bucles anidados puede generarse una (o con otros métodos).

Te paso una referencia: Todo sobre los colores.

Saludos

Cita:

Iniciado por mpozo

Lee este artículo https://developer.mozilla.org/es/doc...LElement/style

Muchas Gracias a los dos +1

Pero soy bastante nuevo y me cuesta muchisimo crear codigos "de la nada"

Estoy intentando lograrlo con este código pero algo hago mal que no funciona:

Código PHP:

  <script type="text/javascript"> 
function design(men) 
{  
      document.getElementById(men).style.backgroundColor="#e9e9e9";  
      document.getElementById(men).style.color="#d32e12"; 
} 
</script>

Código PHP:

  <div id="men">Puuuu meeen</div> 
<INPUT TYPE="button" VALUE="Rosso" onClick="design()">

caricatos · #5 (**permalink**) 08/01/2017, 08:50

Hola:

Cita:

Iniciado por yopmail

...
Pero soy bastante nuevo y me cuesta muchisimo crear codigos "de la nada"
...

Aunque la página que referencio es algo vieja, hay una serie de botones con sendos listados...

Saludos

yopmail · #6 (**permalink**) 08/01/2017, 09:08

Cita:

Iniciado por caricatos

Hola:

Aunque la página que referencio es algo vieja, hay una serie de botones con sendos listados...

Saludos

Muchisimas Gracias, acabe adaptando el siguiete codigo:

<a href="javascript:void(document.body.style.backgrou ndColor='yellow');javascript:void(document.body.st yle.color='WHITE');">Cambia el color del fondo</a>

Al clicar cambia el color y texto de toda la web

Mil Gracias foreros

Alexis88 · #7 (**permalink**) 08/01/2017, 10:18

Cita:

Iniciado por yopmail

Estoy intentando lograrlo con este código pero algo hago mal que no funciona:

Código PHP:

  <script type="text/javascript"> 
function design(men) 
{  
      document.getElementById(men).style.backgroundColor="#e9e9e9";  
      document.getElementById(men).style.color="#d32e12"; 
} 
</script>

Código PHP:

  <div id="men">Puuuu meeen</div> 
<INPUT TYPE="button" VALUE="Rosso" onClick="design()">

Eso sucede porque no estás pasando el id del elemento como argumento. Debería ser así:

Código HTML:

Ver originalonclick="design('men')"

Aunque sería mejor que trabajes de una forma más moderna y registres los eventos.

yopmail · #8 (**permalink**) 08/01/2017, 11:12

Cita:

Iniciado por Alexis88

Eso sucede porque no estás pasando el id del elemento como argumento. Debería ser así:

Código HTML:

Ver originalonclick="design('men')"

Aunque sería mejor que trabajes de una forma más moderna y registres los eventos.

:O Wow muchisimas Gracias.. lo sabré para la proxima.. +1 muy merecido Gracias¡¡¡