基于js实现隔行换色。

最新推荐文章于 2024-04-14 08:44:26 发布

记得要背单词

最新推荐文章于 2024-04-14 08:44:26 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/nowchange/article/details/90509982

版权

<!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>

记得要背单词

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
基于js实现隔行换色。

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

扫一扫