前端变色变到飞起，3行CSS搞定，各种方案任你挑！

2023-12-13 05:47:57

引子：变色，前端开发中的点睛之笔

在前端开发的世界里，变色可谓是点睛之笔，让网页界面灵动而富有变化。然而，对于初学者而言，实现变色效果似乎是一项艰巨的任务。别担心，今天，我们就来揭秘JS之三行变色的N多种方案，让你轻松玩转变色技巧！

方案1：遍历索引，巧用余数

这种方案的思路十分清晰：依次遍历每一个列表项（li），通过索引除以3取余数，让当前的li拥有不同的背景颜色。代码实现如下：

const lis = document.querySelectorAll('li');

for (let i = 0; i < lis.length; i++) {
  const index = i + 1;
  const remainder = index % 3;

  switch (remainder) {
    case 1:
      lis[i].style.backgroundColor = 'red';
      break;
    case 2:
      lis[i].style.backgroundColor = 'green';
      break;
    case 0:
      lis[i].style.backgroundColor = 'blue';
      break;
  }
}

方案2：数组取色，一招制敌

告别一个个的判断，我们可以直接采用数组或者直接查找对应样式的li来完成变色。代码实现如下：

const colors = ['red', 'green', 'blue'];

const lis = document.querySelectorAll('li');

for (let i = 0; i < lis.length; i++) {
  lis[i].style.backgroundColor = colors[i % colors.length];
}

方案3：不是遍历每一个，而是直接定位

这个方案的思路是，我们并不是遍历每一个li，而是直接定位对应样式的li来完成变色。代码实现如下：

const redLis = document.querySelectorAll('li.red');
const greenLis = document.querySelectorAll('li.green');
const blueLis = document.querySelectorAll('li.blue');

redLis.forEach((li) => { li.style.backgroundColor = 'red'; });
greenLis.forEach((li) => { li.style.backgroundColor = 'green'; });
blueLis.forEach((li) => { li.style.backgroundColor = 'blue'; });