隔行变色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .c1{
                background: red;  /*定义li为偶数时候的颜色*/
            }
            .c2{
                background: pink ;  /*定义li为奇数时候的颜色*/
            }
            ol li {
                     list-style: none;
                      width: 500px;  /*去除默认样式 定义li宽度为500px*/
            }
            ol li:hover{
                background: orange;  /*鼠标滑过时li的颜色*/
            }
        </style>
    </head>
    <body>
            <ol >
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
            </ol>
        <script type="text/javascript">
            var oli=document.getElementsByTagName("li"); //获取li的标签
            for(i=0;i<oli.length;i++){
                var olis=oli[i];   //获取li有多少个 并赋值给kk
                i%2===0 ? olis.className="c1":olis.className="c2"; //li的偶数行颜色为c1 奇数行颜色为c2
                olis.onmouseout=function(){
                    this.className="c2";  //鼠标滑过后颜色为c2
                }
            }
        </script>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容