摘要:<!DOCTYPE html><html><head> <title>switch</title> <style type="text/css"> #box{width: 100px;height: 100px;background-color: red;margin: 20px 80px;} </s
<!DOCTYPE html>
<html>
<head>
<title>switch</title>
<style type="text/css">
#box{width: 100px;height: 100px;background-color: red;margin: 20px 80px;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var a=document.getElementById("box").style
function bg()
{
a.height ="200px"
}
function bk(){
a.width="200px"
}
function bs(){
a.background="blue"
}
function yc(){
a.display="none"
}
function xs(){
a.display="block"
}
function cz(){
a.display="block"
a.background="red"
a.width="100px"
a.height="100px"
}
</script>
<input type="button" value="变高" onclick="bg()">
<input type="button" value="变宽" name="" onclick="bk()">
<input type="button" value="变色" name="" onclick="bs()">
<input type="button" value="重置" name="" onclick="cz()">
<input type="button" value="隐藏" name="" onclick="yc()">
<input type="button" value="显示" name="" onclick="xs()">
</body>
</html>
批改老师:韦小宝批改时间:2019-02-11 09:47:21
老师总结:写的很不错 一个简单的动画效果 没事的时候这种动画效果可以自己多实现几个来帮助我们记忆