Modificacion de CSS mediante JS

GuillemPejo · #1 (**permalink**) 29/12/2012, 09:02

Hola,
¿Me podrían ayudar en lo siguiente?
Como puedo hacer para que al mover la barra del range, mi CSS cambie, me explico:

Tengo un .html

Código:

<html>
<head>
	<title> # </title>	
</head>
<body>
<img src="Photo.jpg">
<input type="range" name="barra">
</body>
</html>

Y un .css

Código:

#img {
border-radius: ($variable) %;
}

Y quiero que en función del valor que le vaya dando a la “barra” (input type=”range”), mi variable de CSS cambie.

Ejemplo: Pongo la barra al medio (50%), pues que tenga un border-radius de 50%.

Espero haberme explicado bien.
Muchas gracias.
PD: Lo pongo en JS porque creo que tengo que hacerlo con eso.

JavierB · #2 (**permalink**) 29/12/2012, 09:11

Hola GuillemPej

Prueba esto:

Código Javascript:

Ver originalinput type="range" name="barra" onchange="document.getElementById('algo').style.borderRadius=this.value">

Saludos,

GuillemPejo · #3 (**permalink**) 29/12/2012, 09:17

Cita:

Iniciado por JavierB

Hola GuillemPej

Prueba esto:

Código Javascript:

Ver originalinput type="range" name="barra" onchange="document.getElementById('algo').style.borderRadius=this.value">

Saludos,

Muchas Gracias JavierB (:

GuillemPejo · #4 (**permalink**) 29/12/2012, 09:22

Cita:

Iniciado por JavierB

Hola GuillemPej

Prueba esto:

Código Javascript:

Ver originalinput type="range" name="barra" onchange="document.getElementById('algo').style.borderRadius=this.value">

Saludos,

Y si en lugar del border radius le pongo un:

-webkit-filter: grayscale(porcentaje);

¿Cómo seria?

Gracias