基于js实现隔行换色。

原创于 2019-05-24 08:19:16 发布 · 1k 阅读

本内容遵循CC 4.0 BY-SA版权协议

此博客主要介绍基于JavaScript实现隔行换色的内容。在网页开发中，隔行换色能提升表格等元素的可读性。通过JS代码操作，可轻松为表格的奇数行和偶数行设置不同颜色，增强页面视觉效果。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol {
            list-style: none;
        }
        .box {
            margin: 20px auto;
            width: 300px;
        }
        .bgcolor {
            background: yellow;
        }
        .box li {
            padding: 0 5px;
            line-height: 35px;
            border-bottom: 1px dashed #aaaaaa;
            cursor: pointer;
            /*超出一行的内容自动裁切 以省略号代提*/
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
<ul class="box" id="box">
    <li>自改行做前端至今已有0年有余，</li>
    <li>我发现了一个突破点就是javascript</li>
    <li>有些东西跟不上，一没跟上就听明白，心理就会受打击，没了进取的心</li>
    <li>特别是预习复习吧，这两个环节一定是必不可少的。个人体会吧</li>
    <li>我就是不懂了就把老师给的录播视频那个小点反复的看</li>
    <li>相当的重要，有事没事多练练基础。还有就是是面试的时候</li>
    <li>自改行做前端至今已有0年有余，</li>
    <li>我发现了一个突破点就是javascript</li>
    <li>有些东西跟不上，一没跟上就听明白，心理就会受打击，没了进取的心</li>
    <li>特别是预习复习吧，这两个环节一定是必不可少的。个人体会吧</li>
    <li>我就是不懂了就把老师给的视频那个录播小点反复的看</li>
    <li>相当的重要，有事没事多练练基础。还有就是是面试的时候</li>
</ul>
<script>
    var oBox= document.getElementById('box');
    var boxList =oBox.getElementsByTagName('li');
    // 搞个循环来完成我们的样式赋值
    for(var i=0;i<boxList.length;i++){
        //>索引奇数代表偶数行
        if(i % 2 !==0){
            boxList[i].style.backgroundColor='pink';
            /*boxList[i].className+=' bgcolor';*/
        }
    }
</script>
</body>
</html>