Javascript Style

Bigcrime · #1 (**permalink**) 23/04/2010, 11:07

Alguien me podria decir cual es el proceso para aplicar styles a los campos de form ?

Quiero aplicar styles distintos para cada uno de los campos, pero no se cual es la manera correcta de hacerlo, alguien podria ayudarme?

gracias

ClubIce · #2 (**permalink**) 23/04/2010, 12:10

Hola, nadie te ayuda porque ha esta hora, la gente en descanso :P, pero yo si te voy a ayudar:

Si lo que quieres hacer es modificar los estilos CSS dinamicamente con JavaScript, se usa la propiedad style de cada elemento HTML, o sea por ejemplo si lo que quieres es modificar el color de los campos tu Script seria como lo siguientes:

Código Javascript:

Ver originaldocument.getElementById('micampo1').style.backgroundColor="#FF0000"; // Esta linea cambia el color de fondo del campo 1 a 3Rojo
document.getElementById('micampo2').style.backgroundColor="#0000FF"; // Esta linea cambia el color de fondo del campo 2 a Azul
//

en el HTML:

Código HTML:

Ver original<form>
  Campo 1 <input id="micampo1"><BR>
  Campo 2 <input id="micampo2">
</form>

Bacicamente la estructura es la siguienete:

Código Javascript:

Ver originaldocument.getElementById('IdElemento').style.propiedad = valor

IdElemento = Id del elemento que deceas modificar el estilo.
propiedad = propiedad que quieres modificar, importante: las propiedades compuestas por 2 o mas palabras como background-color, debes modificarse de tal forma que se elimina el guion y se coloca la primera letra en mayuscula: backgroundColor. Ejemplo:

font-size: fontSize
text-align: textAlign
etc....

Valor = Nuevo valor para la propiedad.

EDITO: Cometi un error, en el segundo ejemplo.

Bigcrime · #3 (**permalink**) 23/04/2010, 12:30

GraX!! lo estoy probando, tengo como 5 horas tratando de darle estilo y no sale, y tampoco me salio como dijiste, ahora mismo estoy haciendo un script mas simple de 1 solo input , para ver si me sale.

No te Vayas!! graX

Bigcrime · #4 (**permalink**) 23/04/2010, 12:42

Lo intente todo pero no lo logre , que problemas me ha traido el javascript, todos los lenguajes que estudie me funcionarion a la perfeccion, pero javascript no me quiere responder del todo, espero que me ayuden

<html>
<head>
<title>
</title>
<body>
<script>
document.getElementById('campo').style.backgroundC olor="#FF0000";
</script>
<form >
alguien:
<input id="campo" type="text" /><br />
<input type="button" value="Hasta cuanDO!!" />
</form>
</body>
</html>

Que esta mal ?

ClubIce · #5 (**permalink**) 23/04/2010, 13:00

El script que hiziste, el error principal, es que no puedes usar document.getElementById mientras la pagina esta cargando, por eso debes esperar a que cargue el documento o que a por lo menos cargue el elemento que quieres modificar. para esto ejecuta el script cuando la pagina ya haya cargado:

Código Javascript:

Ver originalfunction cambiaColor() {
  document.getElementById('campo').style.backgroundColor="#FF0000";
}

En el HTML:

Código HTML:

Ver original<body onload="cambiaColor()">
<form >
alguien:
<input id="campo" type="text" /><br />
<input type="button" value="Hasta cuanDO!!" />
</form>
</body>

PD: Para colocar codigo usa la opcion Highlight del editor de mensaje.

Bigcrime · #6 (**permalink**) 23/04/2010, 13:17

OMG!!! por fin :P!!!! Me salio!!

entonces siempre debo indicar una funcion
definir lo que quiero dentro de la funcion
y aplicarlo en un evento, bueno eso fue lo que entendi

.

Grax!