实现隔行变色的几种方式（原生）

林小饼
2,618 阅读2分钟

1.简单版隔行变色（没有点击事件）

需求：

  • 单行显示黄色，双行显示绿色

法1、使用伪类选择器（ odd 和 even ）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:nth-child(odd) {
            background-color: yellow;
        }

        ul li:nth-child(even) {
            background-color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li>未来可期1</li>
        <li>未来可期2</li>
        <li>未来可期3</li>
        <li>未来可期4</li>
        <li>未来可期5</li>
        <li>未来可期6</li>
        <li>未来可期7</li>
        <li>未来可期8</li>
        <li>未来可期9</li>
        <li>未来可期10</li>
    </ul>

</body>

</html>

法2、使用伪类选择器（ 2n+1 和 2n）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:nth-child(2n+1) {
            background-color: yellow;
        }

        ul li:nth-child(2n) {
            background-color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li>未来可期1</li>
        <li>未来可期2</li>
        <li>未来可期3</li>
        <li>未来可期4</li>
        <li>未来可期5</li>
        <li>未来可期6</li>
        <li>未来可期7</li>
        <li>未来可期8</li>
        <li>未来可期9</li>
        <li>未来可期10</li>
    </ul>

</body>

</html>

法3、使用 for 循环（配合 i%2==0 判断条件）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>未来可期1</li>
        <li>未来可期2</li>
        <li>未来可期3</li>
        <li>未来可期4</li>
        <li>未来可期5</li>
        <li>未来可期6</li>
        <li>未来可期7</li>
        <li>未来可期8</li>
        <li>未来可期9</li>
        <li>未来可期10</li>
    </ul>
    <script>
        // 1.需求 ：单行显示黄色 双行显示绿色
        // 2.获取伪数组(数据)
        let liList = document.querySelectorAll('ul li')
        // 3.单双行变色处理
        for (let i = 0; i < liList.length; i++) {
            // if (i % 2 == 0) {
            //     liList[i].style.backgroundColor = 'yellow'//单行 黄色
            // } else {
            //     liList[i].style.backgroundColor = 'green'//双行 绿色
            // }
            // 也可以用三元表达式
            i % 2 == 0 ? liList[i].style.backgroundColor = 'yellow' : liList[i].style.backgroundColor = 'green'
        };
    </script>

</body>

</html>

2.高级版隔行变色（有点击事件）

需求：

  • 1.单数行显示黄色，双数行显示绿色
  • 2.鼠标移入每一个li元素 ： 自身变色变红
  • 3.鼠标移出每一个li元素 ： 自身恢复原色

法1、使用 for 循环（配合onmouseover 和 onmouseout）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        ul li:nth-child(odd) {
            background-color: yellow;
        }

        ul li:nth-child(even) {
            background-color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是班长1</li>
        <li>我是班长2</li>
        <li>我是班长3</li>
        <li>我是班长4</li>
        <li>我是班长5</li>
        <li>我是班长6</li>
        <li>我是班长7</li>
        <li>我是班长8</li>
        <li>我是班长9</li>
        <li>我是班长10</li>
    </ul>

    <script>
        // 获取伪数组
        let liList = document.querySelectorAll('li')
        // 遍历数组，注册点击事件处理
        for (let i = 0; i < liList.length; i++) {
            liList[i].onmouseover = function () {
                this.style.backgroundColor = 'red'//鼠标滑入
            }
            liList[i].onmouseout = function () {
                this.style.backgroundColor = ''//鼠标滑出
            }

        }

    </script>
</body>

</html>

法2、使用 for 循环（配合onmouseenter 和 onmouseleave）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        ul li:nth-child(odd) {
            background-color: yellow;
        }

        ul li:nth-child(even) {
            background-color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是班长1</li>
        <li>我是班长2</li>
        <li>我是班长3</li>
        <li>我是班长4</li>
        <li>我是班长5</li>
        <li>我是班长6</li>
        <li>我是班长7</li>
        <li>我是班长8</li>
        <li>我是班长9</li>
        <li>我是班长10</li>
    </ul>

    <script>
        // 获取伪数组（数据）
        let liList = document.querySelectorAll('li')
        // 遍历数组，注册点击事件处理
        for (let i = 0; i < liList.length; i++) {
            liList[i].onmouseenter = function () {
                this.style.backgroundColor = 'red'//鼠标进入
            }
            liList[i].onmouseleave = function () {
                this.style.backgroundColor = ''//鼠标离开
            }
        }
    </script>
</body>

</html>

法3、使用 for 循环结合背包思想Attribute以及配合onmoseover 和 onmouseout

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        ul li:nth-child(odd) {
            background-color: yellow;
        }

        ul li:nth-child(even) {
            background-color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是班长1</li>
        <li>我是班长2</li>
        <li>我是班长3</li>
        <li>我是班长4</li>
        <li>我是班长5</li>
        <li>我是班长6</li>
        <li>我是班长7</li>
        <li>我是班长8</li>
        <li>我是班长9</li>
        <li>我是班长10</li>
    </ul>

    <script>
        // 获取伪数组（数据）
        let liList = document.querySelectorAll('ul li')
        // 注册点击事件（背包思想） 
        for (let i = 0; i < liList.length; i++) {
            liList[i].onmouseover = function () {
                this.setAttribute('bgc', this.style.backgroundColor)
                this.style.backgroundColor = 'red'
            }
            liList[i].onmouseout = function () {
                this.style.backgroundColor = this.getAttribute('bgc')
            }
        }
    </script>
</body>

</html>

法4、使用 for 循环结合背包思想Attribute以及配合onmoseenter 和 onmouseleave

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        ul li:nth-child(odd) {
            background-color: yellow;
        }

        ul li:nth-child(even) {
            background-color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是班长1</li>
        <li>我是班长2</li>
        <li>我是班长3</li>
        <li>我是班长4</li>
        <li>我是班长5</li>
        <li>我是班长6</li>
        <li>我是班长7</li>
        <li>我是班长8</li>
        <li>我是班长9</li>
        <li>我是班长10</li>
    </ul>

    <script>
        // 获取伪数组（数据）
        let liList = document.querySelectorAll('ul li')
        // 注册点击事件（背包思想） 
        for (let i = 0; i < liList.length; i++) {
            liList[i].onmouseenter = function () {
                this.setAttribute('bgc', this.style.backgroundColor)
                this.style.backgroundColor = 'red'
            }
            liList[i].onmouseleave = function () {
                this.style.backgroundColor = this.getAttribute('bgc')
            }
        }
    </script>
</body>

</html>

法5、使用事件委托， e.target指向被点击的那个子元素（配合 onmouseover 和 onmouseout）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        ul li:nth-child(odd) {
            background-color: yellow;
        }

        ul li:nth-child(even) {
            background-color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是班长1</li>
        <li>我是班长2</li>
        <li>我是班长3</li>
        <li>我是班长4</li>
        <li>我是班长5</li>
        <li>我是班长6</li>
        <li>我是班长7</li>
        <li>我是班长8</li>
        <li>我是班长9</li>
        <li>我是班长10</li>
    </ul>

    <script>
        // 1.获取父元素 
        let ul = document.querySelector('ul')
        /* 2.给父元素注册点击事件 */
        ul.onmouseover = function (e) {
            e.target.style.backgroundColor = 'red'
        }
        ul.onmouseout = function (e) {
            e.target.style.backgroundColor = ''
        }
    </script>
</body>

</html>

3.特别注意

高级版隔行变色的 法5 中，如果把 onmouseover 和 onmouseout 换成 onmouseenter 和 onmouseleave 是无法实现点击变色，这是为什么呢？

答案很简单：

onmouseenter 和 onmouseleave 不支持事件冒泡，而事件委托的原理正是事件冒泡！！！

avatar
文章
阅读
粉丝