隔行变色小案例（5）

最新推荐文章于 2022-09-19 19:40:07 发布

向上的二狗

最新推荐文章于 2022-09-19 19:40:07 发布

阅读量126

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_45738592/article/details/120194466

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

基于CSS3实现隔行变色

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>隔行变色</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, ol {
            list-style: none;
        }

        .box {
            margin: 20px auto;
            width: 300px;
        }

        .box li {
            padding: 0 5px;
            line-height: 35px;
            border-bottom: 1px dashed #AAA;
            cursor: pointer;

            /*超出一行的内容自动裁切,以省略号代替*/
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .bgColor {
            background-color: lightcyan;
        }

        /*==CSS3==*/
        /*
         * nth-child(n):当前容器所有子元素中的第N个
         *    .box li:nth-child(1)：BOX容器所有子元素中的第一个并且标签名是LI的
         *
         * nth-of-type(n):先给当前容器按照某一个标签名进行分组,获取分组中的第N个
         *    .box li:nth-of-type(1)：先获取BOX中所有的LI，在获取LI中的第一个
         */
        /*.box li:nth-of-type(even) { !*EVEN:偶数 ODD:奇数*!
            background: lightcyan;
        }

        .box li:hover { !*鼠标滑过的样式,鼠标离开回归原有样式*!
            background: lightcoral;
        }*/
        /*.box li:nth-of-type(3n+1) {
            color: red;
        }

        .box li:nth-of-type(3n+2) {
            color: green;
        }

        .box li:nth-of-type(3n) {
            color: blue;
        }*/
    </style>
</head>
<body>
<ul class="box" id="box">
    <li>岁末，珠峰就业还在一直创造奇迹</li>
    <li>珠峰成长的秘密-兴盛衰败一挥间，长留慈悲在心念</li>
    <li>珠峰培训帮我实现外企梦—上海姑娘徐米米的故事</li>
    <li>应届毕业生也能拿20多万年薪，我是面霸，我一口气拿下六个大公司offer</li>
    <li>学完之真的能推荐进百度吗，我来揭发珠峰培训的老底</li>
    <li>担心逻辑差，学不会，23岁切图小妹工资翻倍</li>
</ul>
<script src="js/changeColor.js"></script>
</body>
</html>

基于JS实现隔行变色

//=>1、获取BOX中所有的LI(我们需要先获取BOX)

var oBox = document.getElementById('box');

//=>想要修改BOX的样式
//1.通过STYLE修改行内样式
// oBox.style.backgroundColor = 'pink';

//2.基于CLASS-NAME属性修改BOX的样式类，从而改变样式
// oBox['className'] = 'box bgColor';
// oBox['className'] += ' bgColor';

var boxList = oBox.getElementsByTagName('li');


//=>2、搞个循环来完成我们的样式赋值
/*for (var i = 0; i < boxList.length; i++) {
    //=>索引是奇数代表偶数行
    if (i % 2 !== 0) {
        // boxList[i].style.backgroundColor = 'pink';
        boxList[i].className += ' bgColor';
    }
}*/

for (var i = 1; i < boxList.length; i += 2) {
    boxList[i].style.backgroundColor = 'lightblue';
    // boxList[i]['style']['backgroundColor'] = 'lightblue';
}

获取页面中的DOM元素

document.getElementById

在整个文档中，同过元素的ID属性值，获取到这个元素对象

getElementById是获取元素的方法，而document限定了获取元素的范围，我们把这个范围称之为：“上下文 [context]”

var oBox = document.getElementById('box');

1. 同过getElementById获取的元素是一个对象数据类型的值（里面包含很多内置的属性）
typeof oBox  =>"object"

2. 分析包含的属性
className：存储的是一个字符串，代表当前元素的样式类名
id：存储的是当前元素ID值（字符串）

innerHTML：存储当前元素中所有的内容（包含HTML标签）
innerText：存储当前元素中所有的文本内容（没有元素标签）

onclick：元素的一个事件属性，基于这个属性，可以给当前元素绑定点击事件
onmouseover：鼠标滑过事件
onmouseout：鼠标离开事件

style：存储当前元素所有的 "行内样式" 值（获取和操作的都只能是写在标签上的行内样式，写在样式表中的样式，无法基于这个属性获取到）

...

[context].getElementsByTagName

在指定的上下文中，通过元素的标签名获取一组元素集合

上下文是我们自己来指定的

var boxList = oBox.getElementsByTagName('li');

1. 获取的结果是一个元素集合（HTMLCollection）,首先它也是对象数据类型的，结构和数组非常相似（数字作为索引，length代表长度），但是不是数组，我们把它叫做“类数组”

boxList[0] 获取当前集合中的第一个LI（通过索引获取到具体的某一个LI即可）
boxList.length 获取集合中LI的数量

2. 集合中的每一项存储的值又是一个元素对象（对象数据类型，包含很多的内置属性，例如：id/className...）

boxList[1].style.color='red';  修改集合中第二个LI的文字颜色

隔三行变色

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>珠峰培训</title>
    <link rel="stylesheet" href="css/reset.min.css">
    <style>
        .box {
            margin: 20px auto;
            width: 300px;
        }

        .box li {
            padding: 0 5px;
            line-height: 35px;
            border-bottom: 1px dashed #AAA;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .bgColorRed {
            background-color: red;
        }

        .bgColorGreen {
            background-color: green;
        }

        .bgColorBlue {
            background-color: blue;
        }

        .bg0 {
            background: lightpink;
        }

        .bg1 {
            background: lightcyan;
        }

        .bg2 {
            background: lightblue;
        }

        /*
         * 我们把HOVER放在BGN的后面,当元素的CLASS='BG0 HOVER'的时候，以HOVER样式为主
         */
        .hover {
            background: #555;
        }

        #hover {
            background: orange;
        }
    </style>
</head>
<body>
<ul class="box" id="box">
    <li>岁末，珠峰就业还在一直创造奇迹</li>
    <li>珠峰成长的秘密-兴盛衰败一挥间，长留慈悲在心念</li>
    <li>珠峰培训帮我实现外企梦—上海姑娘徐米米的故事</li>
    <li>应届毕业生也能拿20多万年薪，我是面霸，我一口气拿下六个大公司offer</li>
    <li>学完之真的能推荐进百度吗，我来揭发珠峰培训的老底</li>
    <li>担心逻辑差，学不会，23岁切图小妹工资翻倍</li>
    <li>担心逻辑差，学不会，23岁切图小妹工资翻倍</li>
</ul>
<script src="js/change.js"></script>
</body>
</html>

var oBox = document.getElementById('box');
var ulList = oBox.getElementsByTagName('li');

for (var i = 0; i < ulList.length; i++) {
    /*
     * i=0 第一个li i%3=0
     * i=1 第二个li i%3=1
     * i=2 第三个li i%3=2
     * i=3 第四个li i%3=0
     * ...
     */
    var n = i % 3,//=>当前LI的索引模3的余数
        liColor = ulList[i];//=>当前循环找出来的那个LI
    if (n === 0) {
        liColor.style.backgroundColor = 'red';
    } else if (n === 1) {
        liColor.style.backgroundColor = 'yellow';
    } else {
        liColor.style.backgroundColor = 'pink';
    }
}

var oBox = document.getElementById("box");
var itemList = oBox.getElementsByTagName("li");

/* 1 */
/*for (var i = 0; i < itemList.length; i++) {
    // var n=i % 3;
    switch (i % 3) {
        case 0:
            itemList[i].className = "bgColorRed";
            break;
        case 1:
            itemList[i].className = "bgColorGreen";
            break;
        case 2:
            itemList[i].className = "bgColorBlue";
            break;
    }
}*/

/* 2 */
/*
var colorArray = ["bgColorRed", "bgColorGreen", "bgColorBlue"];
for (var i = 0; i < itemList.length; i++) {
    /!*
     * i%3=0 "bgColorRed" colorArray[0]
     * i%3=1 "bgColorGreen" colorArray[1]
     * i%3=2 "bgColorBlue" colorArray[2]
     * ...
     * i%3的余数是多少,就是我们当前需要到数组中通过此索引找到的样式类,而这个样式类则是当前LI需要设置的class
     *!/
    itemList[i].className = colorArray[i % 3];
}*/

for (var i = 0; i < itemList.length; i++) {
    itemList[i].className = 'bg' + (i % 3);
}

var oBox = document.getElementById("box"),
    aList = oBox.getElementsByTagName('li');

/*
function changeColor() {
    for (var i = 0; i < aList.length; i++) {
        aList[i].style.backgroundColor = i % 3 == 0 ? 'lightblue' : ((i % 3 == 1) ? 'lightgreen' : 'lightpink');
    }
}

changeColor();*/

for (var i = 0; i < aList.length; i++) {
    var cur = aList[i];
    //0->false 1->true  2->true
    if (i % 3) {
        //1||2
        //1==true  2==true 需要把布尔转化能为数字再比较
        if (i % 3 == true) {
            //1
            cur.className = "bg1";
        } else {
            //2
            cur.className = "bg2";
        }
    } else {
        cur.className = "bg0";
    }
}

var oBox = document.getElementById('box'),
    liList = oBox.getElementsByTagName('li');
var max = liList.length - 1;
for (var i = 0; i < liList.length; i += 3) {
    liList[i].style.background = '#46aa55';
    i + 1 <= max ? liList[i + 1].style.background = '#aa6053' : null;
    i + 2 <= max ? liList[i + 2].style.background = '#5477aa' : null;
}

/*
 *  liList[i].style.background = '#46aa55';
 *  liList[i + 1].style.background = '#aa6053';
 *  liList[i + 2].style.background = '#5477aa';
 *  我们每一组循环一次，在循环体中，我们把当前这一组的样式都设置好即可（可能出现当前这一组不够三 
 *  个,这样会报错）
 *
 *
 *
 *
 *
 *
 *  各种方案思路
 *  1.依次遍历每一个LI，通过索引除以3取余数，让当前的LI有不同的背景色
 *  2.第一种的技巧，告别一个个的判断，直接采用数组或者直接找对应样式的方式来完成
 *  3.不是遍历每一个LI,而是遍历每一组
 */

向上的二狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
隔行变色小案例（5）

基于CSS3实现隔行变色<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>隔行变色</title> <style> * { margin: 0; padding: 0; } ul, ol { list-s.
复制链接

扫一扫