js实现单元格各行变色_或者li各行变色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            .bg{background-color: #666666;}
        </style>
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
            <li>li3</li>
            <li>li3</li>
            <li>li3</li>
        </ul>
        <script type="text/javascript">
            var ul = document.querySelector('ul');
            for(var i=0;i<ul.children.length;i++){
                if(i%2==0){//能被2整除的就添加背景色，否则不操作
                    ul.children[i].className = 'bg'

                       //children[i]相当于ul下面的每个元素，当然直接遍历取得li也可以
                }
                ul.children[i].onmouseover = function(){
                    this.style.background = 'red';
                };
                ul.children[i].onmouseout = function(){
                    this.style.background = '';
                };
            }
        </script>
    </body>
</html>

posted @ 2021-09-16 14:18  蹦极的考拉  阅读(155)  评论(0)    收藏  举报