zoukankan      html  css  js  c++  java
  • 样式操作案例6-隔行变色和高亮显示

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <ul id="mv">
        <li>西施</li>
        <li>貂蝉</li>
        <li>王昭君</li>
        <li>杨玉环</li>
        <li>芙蓉姐姐</li>
      </ul>
      <script>
        // 1 隔行变色
        // 获取到所有的li,判断奇数行和偶数行
        var mv = document.getElementById('mv');
        var lists = mv.getElementsByTagName('li');
    
        for (var i = 0; i < lists.length; i++) {
          var li = lists[i];
          // 判断当前的li 是奇数行 还是偶数行
          if (i % 2 === 0) {
            // i是偶数 , 但是当前是奇数行
            // 设置奇数行的背景颜色
            li.style.backgroundColor = 'red';
          } else {
            // 设置偶数行的背景颜色
            li.style.backgroundColor = 'green';
          }
        }
       
        
    
        // 2 鼠标放上高亮显示
        // 
        // 2.0 给所有的li 注册事件  鼠标经过和鼠标离开的两个事件
        for (var i = 0; i < lists.length; i++) {
          var li = lists[i];
           // 2.1 鼠标放到li上,高亮显示当前的li
           var bg;
           li.onmouseover = function () {
             // 鼠标放到li上的时候,应该记录li当前的颜色
             bg = this.style.backgroundColor;
    
             this.style.backgroundColor = 'yellow';
           }
           // 2.2 鼠标离开li,还原原来的颜色
           li.onmouseout = function () {
             // 鼠标离开,还原原来的颜色
             this.style.backgroundColor = bg;
           }
        }
       
        
        
        
      </script>
    </body>
    </html>
  • 相关阅读:
    bzoj3159: 决战
    Codeforces Round #516 (Div. 1, by Moscow Team Olympiad) C
    Codeforces Round #516 (Div. 1, by Moscow Team Olympiad) B
    Codeforces Round #516 (Div. 1, by Moscow Team Olympiad) A
    loj 6401 字符串
    BZOJ5194 雪地靴
    BZOJ 4709 柠檬
    BZOJ 3343 魔法
    [8月16日绍兴]试剂
    设备塔
  • 原文地址:https://www.cnblogs.com/jiumen/p/11405084.html
Copyright © 2011-2022 走看看