点击按钮，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色
CSS
<style> .red { background: red; } .green { background: green; } ul{ list-style: none; } </style>
HTML
<body> <button>点击按钮变色</button> <ul> <li>li+1</li> <li>li+2</li> <li>li+3</li> <li>li+4</li> <li>li+5</li> </ul> </body>
JAVAscript
<script> //点击按钮，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色 document.querySelector('button').onclick = function () {//找到页面上的button 添加点击事件 var li = document.querySelectorAll('li');//用querySelectorAll得到所有的li for (var i = 0; i < li.length; i++) {//因为用querySelectorAll得到的是一个伪数组 所以需要for循环遍历 if (i % 2 === 0) {//判断如果取余2等于0的话，就说明他是偶数 li[i].setAttribute('class', 'green')//用setAttribute属性设置class为green } else { li[i].setAttribute('class', 'red')//用setAttribute属性设置class为red } } } </script>
当页面上的button被点击时，将所有的li元素按照奇偶性分别设置不同的背景颜色。具体来说，对于所有的li元素，如果它们在列表中的位置是偶数，则将其class属性设置为'green'，并将背景色设置为绿色；如果它们在列表中的位置是奇数，则将其class属性设置为'red'，并将背景色设置为红色。这样，页面上的li元素就会被交替地设置成红色和绿色，形成一种类似于条纹的效果。
