摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 按钮切换DIV变换 </title> <style type="text/css"> #box{width: 30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
按钮切换DIV变换
</title>
<style type="text/css">
#box{width: 300px;height: 300px;background: red;margin: 0 auto;}
.anniu{width: 880px;margin: 0 auto;}
input{width: 100px;height: 50px;background: blue;color: #fff;border:none;margin:20px 0px 0px 0px;font-size: 20px;}
</style>
</head>
<body>
<div id="box"></div>
<div>
<input type="button" value="变高" onclick="bg()">
<input type="button" value="变宽" onclick="bk()">
<input type="button" value="变色" onclick="bs()">
<input type="button" value="变背景" onclick="bbj()">
<input type="button" value="变圆角" onclick="byj()">
<input type="button" value="重置" onclick="cz()">
<input type="button" value="隐藏" onclick="yc()">
<input type="button" value="显示" onclick="xs()">
</div>
<script type="text/javascript">
var box
window.onload=function(){
box=document.getElementById('box')
}
function bg(){
box.style.height="800px"
}
function bk(){
box.style.width="800px"
}
function bs(){
box.style.background="#ccc"
}
function bbj(){
box.style.background="url(images/1.jpg)"
}
function byj(){
box.style.borderRadius="200px"
}
function cz(){
box.style.width="300px"
box.style.height="300px"
box.style.background="none"
box.style.background="red"
box.style.borderRadius="0px"
}
function yc(){
box.style.display="none"
}
function xs(){
box.style.display="block"
}
</script>
</body>
</html>
批改老师：天蓬老师批改时间：2018-11-18 09:20:07
老师总结：效果实现了，合格。不过在实践中，出现js全局变量不是一种好的编程习惯
