美文网首页
JS示例23-隔行换色(li列表)

JS示例23-隔行换色(li列表)

作者: 微小码 | 来源:发表于2019-04-02 17:07 被阅读0次
    <!DOCTYPE >
    <html>
    
        <head>
            <title></title>
            <meta charset="utf-8">
            <script>
                window.onload = function() {
                    // 设置class为box的元素为红色字体
                    var oUl = document.getElementById('ul1');
                    var oLi = oUl.getElementsByTagName('li');
    
                    for(var i = 0; i < oLi.length; i++) {
                        if(i % 2 != 0) {
                            oLi[i].style.background = 'gray';
                        }
                    }
                }
            </script>
        </head>
    
        <body>
            <ul id="ul1">
                <li>隔行换色</li>
                <li>隔行换色</li>
                <li>隔行换色</li>
                <li>隔行换色</li>
                <li>隔行换色</li>
                <li>隔行换色</li>
            </ul>
        </body>
    
    </html>
    
    image.png

    相关文章

      网友评论

          本文标题:JS示例23-隔行换色(li列表)

          本文链接:https://www.haomeiwen.com/subject/lmwgbqtx.html