摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!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>
批改老師：天蓬老師批改時(shí)間：2019-01-13 19:16:05
老師總結(jié)：function box_radius(){
box.style.borderRadius = "50px";
}這里的box,最好用參數(shù)傳入