隔行染色

最新推荐文章于 2024-10-06 04:03:15 发布

快乐马仔

最新推荐文章于 2024-10-06 04:03:15 发布

阅读量79

点赞数

分类专栏： js小案例文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45235688/article/details/115398490

版权

js小案例专栏收录该内容

3 篇文章 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>隔行染色</title>
  <style>
    ul{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    li{
      width: 800px;
      height: 80px;
      line-height: 80px;
      padding: 0 2em;
    }
  </style>
</head>
<body>
  <ul>
    <li>小猫咪1</li>
    <li>小猫咪2</li>
    <li>小猫咪3</li>
    <li>小猫咪4</li>
    <li>小猫咪5</li>
    <li>小猫咪6</li>
  </ul>
  <script>
  
  //先获取全部的li标签
    let lis = document.querySelectorAll("li")
    
    //用forEach遍历lis,拿出全部li标签，a为lis里面li标签，b为下标
    lis.forEach((a,b) => {
    
    //判断下标b是否为偶数，是则染粉色，否则染黄色
      if(b%2 == 0){
        a.style.backgroundColor = "pink"
      }else{
        a.style.backgroundColor = "yellow"
      }
    });
  </script>
</body>
</html>