java script 点击 div背景变化

<style type="text/css">
	#aa{
	width: 100px;
	height: 50px;
	border: 1px solid grey;
	text-align: center;
	line-height: 50px;
	border-radius: 5px;
	color: #0000FF;
	}
	#aa:hover{
	cursor: pointer;
	}
	.a1{
	width: 200px;
	height: 200px;
	background-color: red;
	}
	.a2{
	width: 300px;
	height: 300px;
	background-color: #0000FF;
	border-radius: 20px;
	}
	</style>

 

div id="aa">
	点击
	</div>
	<div class="a1"></div>

<script type="text/javascript">
	var aa = document.getElementById("aa")
	var a1 = document.getElementsByClassName("a1")
	aa.onclick = function(){
	a1[0].className = "a2"
	}
	</script>