摘要：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js控制DIV</title><style type="text/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js控制DIV</title>
<style type="text/css">
#box{
height:100px;
width:100px;
background:red;
margin-top:20px;
margin-left:100px;
}
#pass{
margin-left:20px;
}
[value]{
margin-top:10px;
margin-left:5px;
}
</style>
</head>
<body>
<script type="text/javascript">
var mydiv;
window.onload=function(){
mydiv=document.getElementById('box');}
function bg(){
mydiv.style.height="200px";}
function bk(){
mydiv.style.width="200px";}
function bs(){
mydiv.style.background="pink";}
function by(){
mydiv.style.borderRadius="100px";}
function yc(){
mydiv.style.display="none";}
function xs(){
mydiv.style.display="block";}
</script>
<div id="box"></div>
<div id="pass">
<input type="button" value="變高" onclick="bg()"/>
<input type="button" value="變寬" onclick="bk()"/>
<input type="button" value="變色" onclick="bs()"/>
<input type="button" value="變圓" onclick="by()"/>
<input type="button" value="隱藏" onclick="yc()"/>
<input type="button" value="顯示" onclick="xs()"/>
</div>
</body>
</html>
批改老師：天蓬老師批改時間：2019-06-27 13:00:14
老師總結(jié)：期待你來自己與一個, 以后不用再照搬教學代碼啦...........