Cambiar valor css con java

[Ddsdone]

Necesito saber como podria cambiar un valor css con java script?

ejemplo:

En una hoja de estilo:

Código CSS:

#cuadrado{
    width:100px;
    height:100px;
    background-color:#3f4c6b;
}
 

HTML

Código HTML:

<a href="" id="cuadrado">cambiar tamaño</a>
 

Al darle click deberia cambiar el valor "height a 200px" y si se vuelve a click que cambie a 100px.

Como seria el codigo java?

[Alexis88]

Para empezar, Java y JavaScript son dos lenguajes distintos. Nunca olvides eso.

Para controlar los estilos con JavaScript, debes acceder a ellos mediante la palabra style, seguida de un punto y el nombre de la propiedad a modificar:

Código Javascript:

var enlace = document.getElementById("cuadrado");
 
enlace.addEventListener("click", function(e){
  e.preventDefault();
  this.style.fontSize = this.style.fontSize == "1.5em" ? "1em" : "1.5em";
}, false);
 

Tomo el enlace por su ID y le asigno el evento "click" para que cuando se pulse el enlace, se ejecute una función. En dicha función, evito el comportamiento natural del enlace que es el de redirigir hacia la página asignada en el atributo href, pero como en este caso dicho tributo no tiene un valor, redirigirá hacia la misma página, por eso evito que ocurra eso. Luego, asigno al enlace un nuevo tamaño para el texto, el cual variará según el tamaño actual: Si es igual a 1.5em, le asigno 1em y viceversa.

Decidí modificar el tamaño del texto, porque el enlace no crecerá solamente porque asignes valores a las propiedades de ancho y alto. Aquí puedes leer más acerca de la manipulación de estilos desde JavaScript.

Saludos

[Ddsdone]

te cambio la pregunta, como seria una funcion que cambie el tamaño height de una linea css ?

Seria mas facil, porq solo tendria que llamar a la funcion por un onclick para que "el cuadrado al tocarlo se vuelva rectangulo" y cuando se vuelva a click vuelva a ser cuadrado.

[Alexis88]

Si leíste lo que escribí en la respuesta anterior, habrás notado que dije lo siguiente:

Para controlar los estilos con JavaScript, debes acceder a ellos mediante la palabra style, seguida de un punto y el nombre de la propiedad a modificar

Entonces, en el ejemplo que coloqué, solamente tendrías que cambiar la propiedad fontSize por height o por cualquier otra propiedad a la que desees modificar su valor. Un pequeño ejemplo:

Código HTML:

<div id = "ejemplo"></div>
 

Código CSS:

#ejemplo {
  height: 10em;
  width: 30em;
  background: #0f0;
  border: .1em #f00 solid;
  transition: height .8s;
}
 

Código Javascript:

var div = document.getElementById("ejemplo");
 
div.addEventListener("click", function(e){
  this.style.height = this.style.height == "20em" ? "10em" : "20em";
}, false);
 

En este nuevo ejemplo, tengo un Div al que cada vez que le de un clic, aumentará o disminuirá su altura, que creo que es lo mismo que estás buscando hacer. Aquí puedes ver este ejemplo en ejecución.

Recuerda, la sintaxis para manipular estilos desde JavaScript es:

Código Javascript:

elemento.style.propiedad
 

Saludos

[Ddsdone]

por lo que leo funciona perfecto, pero cuando lo inyecto en mi web no funciona. (probe hacerlo con todo el codigo igual como lo publicaste pero no funciona)

Puede ser que funcione solo si lo subo a mi host?

[Ddsdone]

SOLUCIONADO, TE AGRADESCO MUCHISIMO! nunca estuve en un foro que respondieran tan rapido, con tan buena onda :D

gracias