JS点击事件实现改变对应标签背景颜色

今天同学提问的一个“JS实现的效果是点击对应的标签，起背景颜色变成红色，字体变成白色”，但是她的页面中只是字变了颜色，但是背景颜色去没有变化，
其截图如下：
这里写图片描述

经过页面的调试，发现并没有进入到循环里面，利用alert(cns.length);发现弹出的cns[]数组的长度为0个，
问题：
1、说明在document.getElementById(“nt4”).getElementsByTagName(“ul li”);取不到对应的li,发现不能这样取值，应该写成：document.getElementById(“nt4”).getElementsByTagName(“li”); alert(cns.length)，证明可以取值；
2、但是取值之后，并没有进入到onclick事件里面去，这是为什么呢，将onclick事件换成监听事件： cns[i].addEventListener(‘click’,function () { }发现是可以进行点击的，因为这个页面中的li还有其他地方写了onclick事件，同一个元素有多个点击事件时，会被替代，所以图中的点击事件被其他的覆盖了，更换成addEventListene(‘click’,function () { }监听事件即可；
3、js代码部分可以实行了之后，发现背景颜色还是没有变成红色，因为css样式中，有原本.CRD_order li{}里写了背景颜色，而.lis{}的权重不够，背景颜色自然不能覆盖原来的颜色。

经过调试后，的代码如下：
html结构如下：

<div class="CRD" id="nt4">
    <ul class="CRD_order" >
    <li class="CRD-order" id="C_rd_order1" >全部<p class="ck1" id="ck1">◆</p></li>
    <li class="CRD-order" id="C_rd_order2">未预定同学<p class="ck1" id="ck2">◆</p></li>
    <li class="CRD-order" id="C_rd_order3" >已预订同学<p class="ck1" id="ck3">◆</p></li>
    <li class="CRD-order" id="C_rd_order4" >未支付定金同学<p class="ck1" id="ck4">◆</p></li>
    <li class="CRD-order" id="C_rd_order5" >已支付定金同学<p class="ck1" id="ck5">◆</p></li>
    <li class="CRD-right">下载班级报表</li>           
  </ul>
 </div>

页面效果：

这里写图片描述

需实现的效果是点击对应的标签，起背景颜色变成红色，字体变成白色
js代码：

    <script>
        var cns = document.getElementById("nt4").getElementsByTagName("li");

        for(var i = 0;i<cns.length;i++)
        {
            cns[i].addEventListener('click',function () {

                for(var i = 0;i<cns.length;i++){
                    cns[i].className = "";
                }
                this.className = "lis";
            });
        }
    </script>


//css样式部分:
    .CRD_order  .lis{
            background: red;
            color: #fff;
        }

知识点：
1、.getElementsByTagName(“li”);取值为一个li集合，对每个li点击事件需要for循环才能取到具体的每个li

for(var i = 0;i<cns.length;i++)
        {
            cns[i].addEventListener('click',function () {

        }

2、一个元素不能有多个点击事件，会被后来的点击事件覆盖；
3、css权重：二级权重大于一级权重：.CRD_order .lis{}的权重大于.lis{}；
4、调试代码时要学会利用弹出取值的方法来确定所写的代码是否正确，是否真的取到了你想要的值，取值不对，后面的也就都不会实现了；

JS点击事件实现改变对应标签背景颜色

猜你喜欢