class一个元素可以包含多个类名，每个类名之间用空格隔开。排他思想是一个很重要的思想，先找到所有元素，然后设置成默认，

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 样式从上到下读取，下方样式会覆盖上方样式*/
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            margin:100px;
        }
        .active{
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 一个元素可以包含多个类名，每个类名之间用元素隔开 -->
    <div class="box">

    </div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script>
        // 需求：当点击div时，被点击的div变成蓝色,其他的还原成默认颜色
        // 排他思想：先找到所有元素，然后设置成默认， 然后再找到指定的元素加上相对应的属性
        var divs=document.getElementsByTagName("div");
        for(var n=0;n<divs.length;n++){
            divs[n].onclick=function(){
                // 在js中更改class名称，用className
                //先将所有的class名称都设置成box
                for(var j=0;j<divs.length;j++){
                    divs[j].className="box";
                }
                // 设置完成后，再将指定的div设置成选中样式
                this.className="box active";
            }
        }
    </script>
</body>
</html>