我有一支仙女棒，变大变小变漂亮~
2019-01-13 18:47:51247<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{margin:0px auto;}
#box{width:500px;height:500px;background-color: aquamarine;display: block;}
</style>
<script>
var box
window.onload = function(){
box = document.getElementById("box");
}
function box_width_add(){
box.style.width = "700px";
}
function box_height_add(){
box.style.height = "700px";
}
function box_color(){
box.style.backgroundColor = "pink";
}
function box_display_none(){
box.style.display = "none";
}
function box_display_block(){
box.style.display = "block";
}
function box_border(){
box.style.border = "5px solid #ccc";
}
function box_radius(){
box.style.borderRadius = "50px";
}
function box_restyle(){
box.style.width = "500px";
box.style.height = "500px";
box.style.backgroundColor = "aquamarine";
box.style.border = "none"
box.style.borderRadius = "0px";
box.style.display = "block";
}
</script>
</head>
<body>
<div id="box">
</div>
<br>
<br>
<br>
<br>
<br>
<div>
<button onclick="box_height_add()">变高</button>
<button onclick="box_width_add()">变宽</button>
<button onclick="box_color()">变色</button>
<button onclick="box_display_none()">隐藏</button>
<button onclick="box_display_block()">显示</button>
<button onclick="box_border()">添加边框线</button>
<button onclick="box_radius()">添加圆角</button>
<button onclick="box_restyle()">重置</button>
</div>
</body>
</html>