javascript实现隔行变色和高亮

最新推荐文章于 2024-08-19 18:49:13 发布

「已注销」

最新推荐文章于 2024-08-19 18:49:13 发布

阅读量479

点赞数

分类专栏： javascript 文章标签： javascript 隔行变色

本文链接：https://blog.csdn.net/wangbei85/article/details/53584474

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

javascript实现隔行变色和高亮

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        .box{
            width: 300px;
        }
        ul{
            list-style: none;
        }
        li{
            line-height: 30px;
        }
        li span{
            margin-right: 20px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var lis=document.getElementsByTagName("li");
            for(var i=0;i<lis.length;i++){
                if(i%2==0){
                    lis[i].style.backgroundColor="#ccc";
                }else{
                    lis[i].style.backgroundColor="#ddd";
                }

                lis[i].onmouseover=function(){
                    this.style.backgroundColor="#eee";
                }
                lis[i].onmouseout=function(){
                    this.style.backgroundColor="#999";
                }
            }


        }
    </script>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <span>每一行</span><span>都有</span><span>高亮</span>
            </li>
            <li>
                <span>每一行</span><span>都有</span><span>高亮</span>
            </li>
            <li>
                <span>每一行</span><span>都有</span><span>高亮</span>
            </li>
            <li>
                <span>每一行</span><span>都有</span><span>高亮</span>
            </li>
            <li>
                <span>每一行</span><span>都有</span><span>高亮</span>
            </li>
            <li>
                <span>每一行</span><span>都有</span><span>高亮</span>
            </li>
            <li>
                <span>每一行</span><span>都有</span><span>高亮</span>
            </li>
            <li>
                <span>每一行</span><span>都有</span><span>高亮</span>
            </li>
        </ul>
    </div>
</body>
</html>