Foros del Web » Programando para Internet » Javascript »

Cambiar con un boton el color del fondo de un div

Estas en el tema de Cambiar con un boton el color del fondo de un div en el foro de Javascript en Foros del Web. Hola estoy tratando poder realizar que con formulario al ingresar un nombre de color me tome un estilo para el div si no que tome ...
  #1 (permalink)  
Antiguo 20/06/2010, 22:14
 
Fecha de Ingreso: marzo-2009
Mensajes: 36
Antigüedad: 14 años, 8 meses
Puntos: 0
Mensaje Cambiar con un boton el color del fondo de un div

Hola estoy tratando poder realizar que con formulario
al ingresar un nombre de color me tome un estilo para el div
si no que tome otro, usaria un switch si se puede, les envio los codigos asi los revisan, me interesaria mas saber como encarar el html y el archivo javascript
ya que probe de todo y no hay caso, solo logre, hacer un simple cambio de fondo nada mas tipeando en el campo de formulario azul, rojo o vede mendiante un switch, pero quiero que me modifique un div, espero alguna respuesta, que capas me va a servir tambien por si quiero trabajar un texto, ya sea cambiarle el color, tamaño o demas, gracias, Sebastian.

HTML

<body>

<div id="titulo">
<p class="titulo2">Titulo</p>
</div>

<div id="pruebacolor">
<label>Elegi un color (Verde - Azul - Rojo)</label>
<form id="formu1" method="post" action="">
<input type="text" id="dato" maxlength="10"/><br />
<input type="button" value="APLICAR" onclick="prueba()"/>
</form>
</div>

JAVASCRIPT

function prueba(pruebacolor)
{
var campo=document.getElementById("dato").value;
var color=document.getElementById("pruebacolor");

switch (campo) {
case 'rojo': color.className='pruebacolor';
break;
case 'verde': document.bgColor='#00ff00';
break;
case 'azul': document.bgColor='#0000ff';
break;
}
}
  #2 (permalink)  
Antiguo 21/06/2010, 00:11
Avatar de rebouy  
Fecha de Ingreso: mayo-2010
Ubicación: Argentina
Mensajes: 21
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Cambiar con un boton el color del fondo de un div

No entendi bien tu pregunta, pero creo que necesitas algo asi:
Código HTML:
Ver original
  1. <p>Elegi un color (Verde - Azul - Rojo)</p>
  2.  
  3. <input type="text" id="dato" maxlength="10"/><br />
  4. <input type="button" value="APLICAR" onclick="prueba()"/>
  5. <div id="prueba" style="width:100px;height:100px;background:black;color:white;">div prueba</div>
  6.  
  7.  
  8. function prueba()
  9. {
  10. var campo=document.getElementById("dato").value;
  11.  
  12. var prueba=document.getElementById("prueba");
  13. switch (campo) {
  14. case 'rojo': prueba.style.background="red";
  15. break;
  16. case 'verde':prueba.style.background="green";
  17. break;
  18. case 'azul':prueba.style.background="blue";
  19.  
  20. }
  21. }
Chau suerte!.
  #3 (permalink)  
Antiguo 21/06/2010, 19:55
 
Fecha de Ingreso: marzo-2009
Mensajes: 36
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Cambiar con un boton el color del fondo de un div

Mil gracias rebouy, te comento estoy estudiando programacion web y realmente me esta costando entender, pero eso que me pasaste lo pude interpretar y pude hacer andar mi ejercicio, espero que esto sea seÑal que estoy aprendiendo o entendiendo algo ajjajajaja, si yo quisiera cambiar los colores con 3 botones que digan rojo, azul y verde, y al apretar los mismos cambien los colores, es mucho cambio en el codigo? Espero tu respuesta, gracias, sebastian.
  #4 (permalink)  
Antiguo 21/06/2010, 22:48
Avatar de rebouy  
Fecha de Ingreso: mayo-2010
Ubicación: Argentina
Mensajes: 21
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Cambiar con un boton el color del fondo de un div

Gracias a vos tambien ya que tu pregunta me hizo investigar un rato, al intentar hacer el codigo mas chico y por suerte lo logre, osea de esta manera si queres mas botones solo tenes que agregar el boton y el color que quieras al atributo name y no hacer un switch que crece con cada boton.
Código HTML:
Ver original
  1. <input type="button" name="red" value="rojo" onclick="cambia(this)">
  2. <input type="button" name="green" value="verde" onclick="cambia(this)">
  3. <input type="button" name="blue" value="azul" onclick="cambia(this)">
  4.  
  5. <div id="prueba" style="width:100px;height:100px;background:black;color:white;">div prueba</div>
  6. function cambia(boton){
  7.  
  8.      var color=boton.name;
  9.         document.getElementById("prueba").style.background=color;
  10. }
Suerte cualquier cosa avisa.
  #5 (permalink)  
Antiguo 22/06/2010, 08:10
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 13 años, 5 meses
Puntos: 310
Respuesta: Cambiar con un boton el color del fondo de un div

Se puede hacer así pero es arriesgarse a lo tonto, porque red o white lo tienene todos los navegadores pero hay ciertos colores que no, por eso es mejor ponerlo en hexadecimal. Por otra parte, el atributo es backgroundColor, background supongo que también funciona pero no está aprobado, o eso tengo entendido.
Saludos (:
  #6 (permalink)  
Antiguo 22/06/2010, 16:52
Avatar de rebouy  
Fecha de Ingreso: mayo-2010
Ubicación: Argentina
Mensajes: 21
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Cambiar con un boton el color del fondo de un div

Si cronos tenes razon, lo de los colores lo di por entendido(por parte de sebasdevoto), ya que en su primer pregunta uso hexadecimal para los colores y con respecto a backgroundColor aprendi algo nuevo, porque yo queria usar esa propiedad pero la escribia igual que en css background-color y por supuesto no funcionaba, gracias! chau
  #7 (permalink)  
Antiguo 22/06/2010, 23:33
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 13 años, 5 meses
Puntos: 310
Respuesta: Cambiar con un boton el color del fondo de un div

Las propiedaddes 'compuestas' de CSS se acceden en JS quitándoles el guión y poniéndolo en mayus. Por ejemplo, background-color es backgroundColor, font-size es fontSize, etc...
Saludos (:
  #8 (permalink)  
Antiguo 22/06/2010, 23:49
Avatar de rebouy  
Fecha de Ingreso: mayo-2010
Ubicación: Argentina
Mensajes: 21
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Cambiar con un boton el color del fondo de un div

Gracias cronos, una consulta ¿como se usa :hover en javascript?
probe asi document.getElementById("id").style.hover, pero no va
  #9 (permalink)  
Antiguo 23/06/2010, 00:14
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 7 meses
Puntos: 1284
Respuesta: Cambiar con un boton el color del fondo de un div

Hola:

Sobre el estilo background, no se trata de algo desaprobado, sino de un tipo de estilo que agrupa más propiedades, color, image, repeat, etc... cuando solo se quiere cambiar un color, creo que es mejor backgroundColor, pero para agrupar estilos va bien esto:
background = "red url(fondo.jpg) no-repeat center center";

Y los hover, en realidad se trata de un evento... ¿No te parece?

Claro que también se puede usar un "className".

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #10 (permalink)  
Antiguo 23/06/2010, 01:36
Avatar de rebouy  
Fecha de Ingreso: mayo-2010
Ubicación: Argentina
Mensajes: 21
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Cambiar con un boton el color del fondo de un div

Si caricatos no lo habia pensado, simplemente usar onMouseOver y me olvido del hover
Saludos y gracias.
  #11 (permalink)  
Antiguo 23/06/2010, 19:59
 
Fecha de Ingreso: marzo-2009
Mensajes: 36
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Cambiar con un boton el color del fondo de un div

Yo estoy estudiando y me esta costando entender todavia la logica de la programacion, no se si sera normal, si no sirvo para esto, x momento me deprime, por que no puedo hacer nada, alguien me puede dar algun consejo o algo para ver si puedo sazarle la mano, gracias.
  #12 (permalink)  
Antiguo 24/06/2010, 05:24
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 13 años, 5 meses
Puntos: 310
Respuesta: Cambiar con un boton el color del fondo de un div

Aah claro, entonces background hace 'lo mismo' que border, agrupa estilos. Nunca había visto background en solitario.
Saludos (:
  #13 (permalink)  
Antiguo 24/06/2010, 21:06
 
Fecha de Ingreso: marzo-2009
Mensajes: 36
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Cambiar con un boton el color del fondo de un div

Alguien tiene ejercicios de logica para principiante?
espero respuesta, relacionado a javascript obviamente.
  #14 (permalink)  
Antiguo 25/06/2010, 07:06
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 13 años, 5 meses
Puntos: 310
Respuesta: Cambiar con un boton el color del fondo de un div

¿A qué te refieres con ejercicios de lógica?

Etiquetas: color, fondo, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 08:04.