欢迎使用CSDN-markdown编辑器

来源：互联网发布：java代码大全下载编辑：程序博客网时间：2024/06/04 00:59

标题

</head><body>    <div>        <input type="button" value="添加背景色" />        <input type="button" value="取消背景色" />        <ul>            <li> </li>            <li> </li>            <li> </li>            <li> </li>            <li> </li>            <li> </li>        </ul>    </div></body><script>// 1. 先获取两个button的标签，分别绑定点击事件(1. 添加背景色，2.取消背景色)(function(){    var buttons = document.getElementsByTagName('input');    var nodeLies = document.querySelectorAll('ul li');// nodeLies node表示是一个nodeList类型，Lies变量的名称    // 定义一个 颜色的数组    var bgColors = ['lightpink', 'lightseagreen', 'lightblue', ''];    buttons[0].onclick = function(){        // 1. 获取所有的li标签        // 2. 迭代(遍历)数组        for (var i=0,length=nodeLies.length;i<length;i++){            // 3. 检查当前获取到的li是属于那一个级别(n%3=?)            // 4. 根据不同的级别附值不同的    if (i%3 == 0){                nodeLies[i].style.backgroundColor = 'lightpink';            } else if(i%3 == 1){                nodeLies[i].style.backgroundColor = 'lightseagreen';            } else{                nodeLies[i].style.backgroundColor = 'lightblue';            }            // nodeLies[i].style.backgroundColor = bgColors[i%3];        }    };    // 2.点击取消背景色    buttons[1].onclick = function(){        for (var i=0,length=nodeLies.length;i<length;i++){            // 3. 删除每一个li的背景色             nodeLies[i].style.backgroundColor = '';            // 避免以后需求改动，需要调整没有颜色的位置

// nodeLies[i].style.backgroundColor = bgColors[bgColors.length - 1];
}
};

})();</script>

阅读全文

0 0