用script实现隔行变色的效果(用来练习DOM相关知识)

最新推荐文章于 2023-04-20 16:36:37 发布

路人葵

最新推荐文章于 2023-04-20 16:36:37 发布

阅读量478

点赞数

文章标签： JavaScript 隔行变色

本文链接：https://blog.csdn.net/weixin_41218855/article/details/90181484

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        #list li {
            padding: 10px 4px;
            border-top: 1px dashed #ccc;
        }
        #list a {
            color: #333;
            text-decoration: none;
        }
        #title{
            margin: 10px 0;
            text-align: center;
        }
    </style>
    <script src="common.js"></script>
    <script>
        window.onload = function () {
            var
                oList = $('list');
                aLi = oList.getElementsByTagName('li');
                for (var i = 0; i < aLi.length; i++) {
                    //添加索引
                    aLi[i].index = i;
                    aLi[i].style.backgroundColor = i % 2 ===0 ? '#eee' : '#fff';
                    //鼠标移入事件
                    aLi[i].onmouseover = function () {
                        this.style.backgroundColor = 'red';
                    }
                    //鼠标移出事件
                    aLi[i].onmouseout = function () {
                        this.style.backgroundColor = this.index % 2 === 0 ? '#eee' : '#fff';
                    }
                }
        }
    </script>
</head>
<body>
<h2 id="title">邮箱列表</h2>
<ul id="list">
    <li><a href="javascript:;">这是第1个li</a></li>
    <li><a href="javascript:;">这是第2个li</a></li>
    <li><a href="javascript:;">这是第3个li</a></li>
    <li><a href="javascript:;">这是第4个li</a></li>
    <li><a href="javascript:;">这是第5个li</a></li>
    <li><a href="javascript:;">这是第6个li</a></li>
    <li><a href="javascript:;">这是第7个li</a></li>
    <li><a href="javascript:;">这是第8个li</a></li>
    <li><a href="javascript:;">这是第9个li</a></li>
    <li><a href="javascript:;">这是第10个li</a></li>
    <li><a href="javascript:;">这是第11个li</a></li>
    <li><a href="javascript:;">这是第12个li</a></li>
    <li><a href="javascript:;">这是第13个li</a></li>
    <li><a href="javascript:;">这是第14个li</a></li>
    <li><a href="javascript:;">这是第15个li</a></li>
    <li><a href="javascript:;">这是第16个li</a></li>
    <li><a href="javascript:;">这是第17个li</a></li>
    <li><a href="javascript:;">这是第18个li</a></li>
    <li><a href="javascript:;">这是第19个li</a></li>
    <li><a href="javascript:;">这是第20个li</a></li>
</ul>
</body>
</html>

路人葵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用script实现隔行变色的效果(用来练习DOM相关知识)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>隔行变色</title> <style> * { margin: 0; padding...
复制链接

扫一扫