js经典点击小事件

小灯泡实例

• 1 css部分

  /* 清除内置margin padding */
    * {
        margin: 0;
        padding: 0;
    }
   
    ul{
        overflow: hidden;
         /* 因为li浮动会造成ul的高度塌陷防止ul高度塌陷 */
    }
    ul li {
        list-style: none;
        float: left;/*让li并排显示*/
        width: 100px;
        height: 100px;
        background-color: #009966;
        border-radius: 50%;/*让li的变成圆形*/
        border: 50px solid lightpink;/*给他加border样式让其成环状*/
    }
    /*为其设置点击后样式on*/
    .on{
        background-color: gold;
        
        border: 50px solid papayawhip;
    }

• 2 html部分

   <ul>
       <li class="on"></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
   </ul> 

• 3 js部分

 // 获取html元素
        var lis = document.getElementsByTagName('li') 
        // 使用for循环遍历出每一个li
        for (let i = 0; i < lis.length; i++) {
            // 添加点击事件
            lis[i].onclick = function () {
                // 一刀切 遍历出每一个li去掉每一个li的点击样式
                for (let j = 0; j < lis.length; j++) {

                    lis[j].className = "";
                }
                然后为点击的圆环添加样式
                this.className = "on"
            }
        }

• 4 成品如图