1.需要：奇数行和偶数行颜色不同，鼠标经过某个li的时候背景颜色需要改变，当鼠标离开某个li的时候，颜色需要回到原来状态

    2.首先我们开始让奇数和偶数行颜色改变时，我第一反应是for循环来做，后来发现需要循环2此，比较麻烦，下面是判断li的奇偶性来做，方便很多，然后将简单的if语句用三元表达式来简化很nice

    这个时候我们就引入了自定义属性，讲原来的值（颜色）存到一个变量中，然后我们自己在每个li中定义一个属性来存储这个变量
    等到鼠标经过后，我们需要用到原来的属性的时候，再讲这个方法拿来用

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <style>
    10.         * {
    11.             margin: 0;
    12.             padding: 0;
    13.         }
    15.         ul {
    16.             list-style: none;
    17.             width: 500px;
    18.             margin: 30px auto;
    19.         }
    21.         li {
    22.             line-height: 35px;
    23.             border-bottom: 1px solid red;
    24.         }
    25.     </style>
    26. </head>
    28. <body>
    29.     <ul class="box">
    30.         <li>0</li>
    31.         <li>1</li>
    32.         <li>2</li>
    33.         <li>3</li>
    34.         <li>4</li>
    35.     </ul>
    36.     <script>
    37.         // 自定义属性，前期把一些值存储到元素属性上，后期需要用到的时候直接从元素上获取即可
    38.         var lis = document.getElementsByTagName('li')
    39.         for (var i = 0; i < lis.length; i++) {
    40.             var bg = i % 2 === 0 ? 'red' : 'pink';
    41.             lis[i].style.backgroundColor = i % 2 === 0 ? 'red' : 'pink';
    42.             lis[i].myOriginBg = bg
    43.             lis[i].onmouseover = function() {
    44.                 this.style.backgroundColor = ' blue'
    45.             }
    46.             lis[i].onmouseout = function() {
    47.                 this.style.backgroundColor = this.myOriginBg
    48.             }
    49.         }
    50.     </script>
    51. </body>
    53. </html>

    image.png