隔行染色（升级版），触碰变色

最新推荐文章于 2024-10-02 05:39:15 发布

快乐马仔

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量122

点赞数

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

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

版权

js小案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文通过HTML和JavaScript实现了一个列表项隔行不同颜色的效果，并且当鼠标悬停在列表项上时，背景颜色变为天蓝色。通过设置奇偶数索引来控制背景颜色，同时使用`data-color`属性保存原始颜色以便鼠标移出时恢复。此代码实例适用于网页交互设计和前端开发的学习。

摘要由CSDN通过智能技术生成

隔行染色，触碰变色

分析：如上一文章一样，每隔一行颜色就一样，考虑用奇偶数来控制背景颜色，当我鼠标触碰到第二行时，背景颜色变为天蓝色
在这里插入图片描述

<!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>
    let lis = document.querySelectorAll("li")
    lis.forEach((li, b) => {
      if (b % 2 == 0) {
        li.style.backgroundColor = "pink"
      } else {
        li.style.backgroundColor = "yellow"
      }
      //利用Attribute系列为li标签添加非标准属性data-color,用来存储li原本的颜色
      li.setAttribute("data-color", li.style.backgroundColor)
      //添加鼠标移入事件
      li.onmouseover = () => {
        li.style.backgroundColor = "skyblue"
      }
      //添加鼠标移出事件
      li.onmouseout = () => {
      //把li的背景颜色变回原本的颜色
        li.style.backgroundColor = li.getAttribute("data-color")
       // 用户会多次移入移除，所以来回添加删除会消耗性能，所以以下代码不写
        // li.removeAttribute("data-color")
      }
    });
  </script>
</body>

</html>