0
446<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="height:4000px">
<style>{
margin: 0;
padding: 0;
}
#btn {
text-align: center;
margin-top: 10px;
}
#main {
background-color: #008800;
width: 100px;
height: 100px;
margin: 30px auto;
}
</style>
<p id="btn">
<button id="wider">变宽</button>
<button id="higher">变高</button>
<button id="change-color">变色</button>
<button id="hide">隐藏</button>
<button id="reset">重置</button></p>
<p id="wrap">
<p id="main"></p></p>
<script>
i=0;
op = document.getElementById('main');
oBtn = document.getElementsByTagName('button');
for(i,len=oBtn.length;i<len;i++){
oBtn[i].onclick=function(){
switch(this.id){
case "wider" :
op.style.width = "200px";
break;
case "higher" :
op.style.height = "200px";
break;
case "change-color" :
op.style.background = "red";
break;
case "hide" :
op.style.display = "none";
break;
case "reset" :
op.style.background = "#008800";
op.style.width = "100px";
op.style.height = "100px";
op.style.display = "block";
}
}}
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
业精于勤，荒于嬉;行成于思，毁于随。