js改变div属性

来源：互联网发布：瑞中数据官网编辑：程序博客网时间：2024/06/10 12:05
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">body{margin: 0px;padding: 0px;}#show{background: red;width: 100px;height: 50px;float: left;margin-top: 15px;margin-left: 10px;color: white;display: block;float: left;}h1{float: left;}#link{width: 200px;height: 200px;border: 5px solid black;background: gainsboro;float: left;position:absolute;top: 100px;left: 100px;}#bg{position: absolute;display:none;left:0;top:0;z-index:10;background:#DCDBDC;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);}#sz{position: absolute;display:none;width:500px;height:300px;left:50%;top:40%;z-index:11;background:#B8F764; }#sz ul{margin: 0px;padding: 0px;width: 240px;height: 220px;float: left;}#sz ul li{line-height: 30px;text-align: center;width: 240px;height: 80px;list-style:none;}#sz div div{margin-left: 20px;line-height: 30px;text-align: center;width: 50px;height: 40px;float: left;}#sz a{float: left;text-decoration: none;}</style></head><body><h1>请为下面的div设置样式：</h1><button id="show" onclick="show()">点击设置</button><div id="link"></div><div id="bg" > </div><div id="sz" ><div><ul><li>请选择背景颜色：</li><li>请选择宽度（px）:</li><li>请选择高度（px）:</li></ul><ul style="float: right;"><li><div id="red" style="background: green;">红色</div><div id="yellow" style="background: deepskyblue;">黄色</div><div id="blue" style="background: pink;">蓝色</div></li><li><div id="w200" style="background: whitesmoke;">200</div><div id="w300" style="background: whitesmoke;">300</div><div id="w400" style="background: whitesmoke;">400</div></li><li><div id="h200" style="background: whitesmoke;">200</div><div id="h300" style="background: whitesmoke;">300</div><div id="h400" style="background: whitesmoke;">400</div></li></ul></div><div><a href="#" onclick="returns()">恢复</a><a href="javascript:void(0)" onclick="closeBox()">关闭</a></div></div><script>var link=document.getElementById("link");function closeBox(){bg.style.display="none";sz.style.display="none";}function show(){var bg=document.getElementById("bg");var sz=document.getElementById("sz");bg.style.width=document.body.scrollWidth + "px";bg.style.height=document.body.scrollHeight+"px";bg.style.display="block";sz.style.display="block";}function returns(){link.style.width="200px";link.style.height="200px";link.style.background="gainsboro";}var red=document.getElementById("red");var yellow=document.getElementById("yellow");var blue=document.getElementById("blue");var w200=document.getElementById("w200");var w300=document.getElementById("w300");var w400=document.getElementById("w400");var h200=document.getElementById("h200");var h300=document.getElementById("h300");var h400=document.getElementById("h400");red.onmouseover=function(){link.style.background="red";red.style.background="red";}yellow.onmouseover=function(){link.style.background="yellow";yellow.style.background="yellow";}blue.onmouseover=function(){link.style.background="blue";blue.style.background="blue";}w200.onmouseover=function(){link.style.width="200px";w200.style.background="bisque";}w300.onmouseover=function(){link.style.width="300px";w300.style.background="bisque";}w400.onmouseover=function(){link.style.width="400px";w400.style.background="bisque";}h200.onmouseover=function(){link.style.height="200px";h200.style.background="bisque";}h300.onmouseover=function(){link.style.height="300px";h300.style.background="bisque";}h400.onmouseover=function(){link.style.height="400px";h400.style.background="bisque";}</script></body></html>
阅读全文
0 0