JS | 改变当前点击元素的样式，其他元素样式不变

利用JS实现每次点击时，被点击元素样式发生改变，而其他同级元素样式不变的功能。可借此来完后一些单选样式。

<style>
		.icon{
			margin: 10px;
			height: 20px;
			width: 20px;
			border: 1px solid black;
		}
		.select{
			padding: 2px;
			height: 2px;
			width: 2px;
			border:1px solid rebeccapurple;
		}
</style>
<div id="main">
		<div class="icon select"></div>
		<div class="icon"></div>
		<div class="icon"></div>
		<div class="icon"></div>
		<div class="icon"></div>
		<div class="icon"></div>
</div>
<script>
	var divs = document.getElementsByClassName("icon");
	for(var i=0;i<divs.length;i++){
		var div = divs[i];
		div.onclick = function(){
			for(var i=0;i<divs.length;i++){
				divs[i].className = "icon";
			}
			this.className = "icon select";
		}
	}
</script>

复制代码自行实践，点击后div变小，默认第一个元素是选中样式。每次只有选中的div才会变小，其他则恢复原样。