DOM操作,隔行换色

隔行换色分两种

第一种通过行内样式更改背景色,鼠标点击时,更换背景色(排他思想)

<ul>

        <li class="item">1</li>

        <li class="item">2</li>

        <li class="item">3</li>

        <li class="item">4</li>

        <li class="item">5</li>

        <li class="item">6</li>

    </ul>

    <script>

        var liEls = document.querySelectorAll(".item");

        //for循环遍历,给每个li添加背景色

        // 奇数行背景色是红色,偶数行是绿色

        for (var i = 0; i < liEls.length; i++) {

            liEls[i].style.backgroundColor = i % 2 == 0 ? '#f00' : '#0f0';

            // 给每个li添加点击事件

            liEls[i].onclick = function () {

                //排他思想,把所有背景色删一遍,重新设置样式

                //这种方法简单粗暴,但是性能差

                for (var j = 0; j < liEls.length; j++) {

                    liEls[j].style.backgroundColor = '';

                    liEls[j].style.backgroundColor = j % 2 == 0 ? '#f00' : '#0f0';

                }

                this.style.backgroundColor = '#00f';

            }

        }

    </script>

第二种 通过保存下标,来找到点击之前的元素,进行修改(把点击上一个元素的背景色恢复成默认的;然后再给点击的元素设置背景色)

 

 <ul>

        <li class="item">1</li>

        <li class="item">2</li>

        <li class="item">3</li>

        <li class="item">4</li>

        <li class="item">5</li>

        <li class="item">6</li>

    </ul>

    <script>

        var liEls = document.querySelectorAll(".item");

        //这种方法通过保存下标,来找到点击之前的元素,进行修改(把点击上一个元素的背景色恢复成默认的;然后再给点击的元素设置背景色)

        // 某一次点击的下标(初始值没有)

        var tempIndex = -1;

        //循环遍历,给每个li添加背景色

        for (var i = 0; i < liEls.length; i++) {

            // 三元表达式

            liEls[i].style.backgroundColor = i % 2 == 0 ? '#f00' : '#0f0';

            //获取下标

            liEls[i].index = i;

            // 添加点击事件

            liEls[i].onclick = function () {

                // 这里判断tempIndex 不等于-1 ,说明上一次点击更改了背景色,要把更改的背景色恢复成默认的背景色

                if (tempIndex != -1) {

                    liEls[tempIndex].style.backgroundColor = tempIndex % 2 == 0 ? '#f00' : '#0f0';

                }

                // 把点击某个元素的下标传给tempIndex来保存

                tempIndex = this.index;

                this.style.backgroundColor = '#00f';

            }

        }

    </script>