码迷,mamicode.com
首页 > 其他好文 > 详细

样式操作6-隔行变色和高亮显示

时间:2019-08-24 16:48:30      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:this   elements   for   UNC   utf-8   事件   body   oct   charset   

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

 

样式操作6-隔行变色和高亮显示

标签:this   elements   for   UNC   utf-8   事件   body   oct   charset   

原文地址:https://www.cnblogs.com/jiumen/p/11405084.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!