javascript实现隔行变色和高亮

来源：互联网发布：任务管理系统 java开源编辑：程序博客网时间：2024/05/21 11:02
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>
0 0