problema con css y javascript
Publicado por manuel (2 intervenciones) el 27/11/2016 20:47:44
hola estoy aprendiendo desde hace bastante poco, y estoy atrapado en este problema que llevo unas horas sin poder encontrar la solución, estoy intentando hacer un modificador de las propiedades de css con javascript , a la hora de sacar el objeto a modificar en pantalla no me sale nada y por lo tanto controles creados son inutiles y no se donde tengo el fallo, por favor necesito ayuda, muchas gracias
Este es el HTML
el css
Este es el HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="csstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<ul>
<li><a href="#">Float</a>
<ul>
<li><a href="#">Size <input type="range" max="500" min="0" id="tamanio" onchange="f();"></a></li>
<li><a href="#">Top</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Left</a></li>
<li><a href="#">Right</a></li>
</ul>
</li>
<li><a href="#">Box</a></li>
<li><a href="#">Color </a>
<ul>
<li><a href="#">Color <input type="color" id="color" onchange="f();"> </a></li>
<li><a href="#">Opacity <input type="range" max="100" min="0" id="op" onchange="f();"> </a></li>
</ul>
</li>
<li><a href="#">Border</a>
<ul>
<li><a href="#">Border Size <input type="range" max="100" min="0" id="borde" onchange="f();"></a></li>
<li><a href="#">Border Color <input type="color" id="bcolor" onchange="f();"></a></li>
<li><a href="#">Border Radius</a></li>
</ul>
</li>
<li><a href="#">Shadow</a>
<ul>
<li><a href="#">Shadow Color <input type ="color" id="csombra" onchange="f();"> </a></li>
<li><a href="#">Shadow Opacity <input type="range" max="100" min="0" id="sombra2" onchange="f();"></a></li>
<li><a href="#">Up and Down <input type="range" max="100" min="-100" id= "sombra1" onchange="f();"></a></li>
<li><a href="#">Left and Right <input type="range" max="100" min="-100" id="sombra" onchange="f();"></a></li>
</ul>
</li>
</ul>
</div>
<center><div id="dibujo" style="position:fixed;right:500px;top:500px;" onchange="f();"> </div></center>
<script type="text/javascript">
function f(){
c=document.getElementById('color').value;
b=document.getElementById('borde').value;
t=document.getElementById('tamanio')value;
cb=document.getElementById('bcolor').value;
id=document.getElementById('sombra').value;
aa=document.getElementById('sombra1').vale;
o=document.getElementById('sombra2').value;
cs=document.getElementById('csombra').value;
op1=document.getElementById('op').value;
op2=op1/100;document.getElementById('dibujo').style.background=c;
document.getElementById('dibujo').style.width=t+"px";
document.getElementById('dibujo').style.height=t+"px";
document.getElementById('dibujo').style.border=b+"px"+" "+"solid"+" "+cb;
document.getElementById('dibujo').style.borderRadius="100%";
document.getElementById('dibujo').style.boxShadow=id+"px"+" "+aa+"px"+" "+o+"px"+" "+cs;
document.getElementById('dibujo').style.opacity=op2;
document.getElementById('dibujo').style.transition="all ease 2s";
document.getElementById('dibujo').style.transform="rotate(360 deg)";
}</script>
</body>
</html>
el css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
body{background-image: url(fondo.jpg);
background-repeat: no-repeat;
background-size: 100%;
}ul {margin:0 px; padding: 0px;
list-style:none
}ul li a{text-decoration :none;
color:white; display:block;}ul li{ float:left; width:250px; height:60px;background-color:black;
font-size:20px;
line-height:50px;
text-align:center;
border-radius: 3px;
opacity: 0.8;
}ul li a:hover{
background-color:orange;
}ul li ul li{ display:none;}ul li:hover ul li{
display:block;}Valora esta pregunta
0
