js切换背景颜色

	<!-------change the background color-------------->
	<script>
		function color1(event)
  {
  var cubebody=document.getElementById('body_color'); 
        cubebody.className = 'graydient1'; 
  }
		function color2()
  {
      var cubebody=document.getElementById('body_color'); 
       cubebody.className = 'graydient2'; 
  }
		function color3()
  {
      var cubebody=document.getElementById('body_color'); 
       cubebody.className = 'graydient3';  
  }
		function color4()
  {
      var cubebody=document.getElementById('body_color'); 
       cubebody.className = 'graydient4'; 
  }
	</script>
	<style>
/* 下拉按钮样式 */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
 
/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
    position: fixed;
	left: 50px;
	top: 20px;
    display: inline-block;
}
 
/* 下拉内容 (默认隐藏) */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
 
/* 下拉菜单的button */
.dropdown-content button {
    background-color: #4CAF50;
	border-radius: 6px;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
 
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}
 
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
}
 
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
 
<div class="dropdown">
  <button class="dropbtn">Background</button>
  <div class="dropdown-content">
	  <button onMouseDown="color1(event)">type 1</button>
	  <button onMouseDown="color2()">type 2</button>
	  <button onMouseDown="color3()">type 3</button>
	  <button onMouseDown="color4()">type 4</button>
  </div>
</div>
	<!--------change color end---------->
	<!-------chang