javascript,_网站上看到一个这样点击按钮控制DIV的变化的效果，试着写了下，效果可以实现，这样写有什么不好的地方吗？或者怎么写可以提高性能，javascript

网站上看到一个这样点击按钮控制DIV的变化的效果，试着写了下，效果可以实现，这样写有什么不好的地方吗？或者怎么写可以提高性能

<!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>

 <button id="wider">变宽</button>
 <button id="higher">变高</button>
 <button id="change-color">变色</button>
 <button id="hide">隐藏</button>
 <button id="reset">重置</button>

</div>

 <div id="main"></div>

</div>

i=0;
oDiv = document.getElementById('main');

oBtn = document.getElementsByTagName('button');
for(i,len=oBtn.length;i<len;i++){

 oBtn[i].onclick=function(){

     switch(this.id){

       case "wider" :
         oDiv.style.width = "200px";
         break;
       case "higher" : 
         oDiv.style.height = "200px";
         break;
       case "change-color" : 
         oDiv.style.background = "red";
         break;
       case "hide" : 
         oDiv.style.display = "none";
         break;
       case "reset" : 
         oDiv.style.background = "#008800";
         oDiv.style.width = "100px";
         oDiv.style.height = "100px";
         oDiv.style.display = "block";
     }

}
</script>

</body>
</html>