【js案例】webApi实现隔行变色

嘻咦啊写

已于 2022-03-26 11:28:30 修改

阅读量336

点赞数 1

文章标签： javascript 前端开发语言

于 2022-02-26 19:56:22 首次发布

本文链接：https://blog.youkuaiyun.com/belloc_li/article/details/123154838

版权

今天来看一个小案例，用js中的api来实现隔行变色的效果。

在这里插入图片描述

分析思路 :

目的是点击btn 修改所有li元素颜色（单行：橙色双行：粉色）
单行和双行和可以使用if判断，

步骤：
1.获取元素
2.注册事件
3.事件处理

代码如下：

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

<body>
  <button class="btn">点我啊，给你点颜色看看</button>
  <ul>
    <li>不可以涩涩</li>
    <li>不可以涩涩</li>
    <li>不可以涩涩</li>
    <li>不可以涩涩</li>
    <li>不可以涩涩</li>
    <li>不可以涩涩</li>
    <li>不可以涩涩</li>
    <li>不可以涩涩</li>
    <li>不可以涩涩</li>
    <li>不可以涩涩</li>
  </ul>

  <script>
    

    let btn = document.querySelector('.btn')
    let liList = document.querySelectorAll('li')

    btn.onclick = function(){
      for(let i = 0;i <liList.length;i++){
        if( i % 2 == 0){
          liList[i].style.backgroundColor='pink'

        }else{
          liList[i].style.backgroundColor = 'orange'
        }

      }
    }

    
  </script>
</body>

</html>