我们有一个ul，ul里面有五个li，都是宽100px，高50px，背景颜色为粉色：

image.png

现在我们想通过点击其中的li，让这个被点击的li宽度变为200px，颜色变为天蓝色，如果我们点击后依次去换每个属性，实在太麻烦了。所以我们可以事先把点击后的样式写在一个类名中，点击元素时直接更换它的class名即可。

通过css先写好点击后的效果：

        .active{   /*点击后的样式*/
            background: skyblue;
            width:200px;
        }

js代码：

        var myLi = document.getElementsByTagName("li");  //获取页面中全部li
        for(var i=0;i<myLi.length;i++){  //依次给每个li设置点击事件
            myLi[i].onclick = function(){
                this.className="active";  //更换class名为“active”
            }
        }

我们点击第一个和第三个li试一试，结果如下图所示，可以看到点击后的li都被改变了样式。如果不是要点击，而是滑入的话，把onclick事件改为onmouseover事件就可以啦。