前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >隔行变色

隔行变色

作者头像
河湾欢儿
发布2018-09-05 17:30:52
1.3K0
发布2018-09-05 17:30:52
举报
文章被收录于专栏:河湾欢儿的专栏
代码语言:javascript
复制
<!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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.10.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档