如何根据百分比值更改图标列表的颜色？

<ul>
  <li>
    <i class="icon"></i>
    <span class="percentage">50%</span>
  </li>
  <li>
    <i class="icon"></i>
    <span class="percentage">75%</span>
  </li>
  <li>
    <i class="icon"></i>
    <span class="percentage">90%</span>
  </li>
</ul>

.icon {
  /* 定义图标样式 */
}

.icon.red {
  color: red;
}

.icon.yellow {
  color: yellow;
}

.icon.green {
  color: green;
}

// 获取所有图标列表项
const items = document.querySelectorAll('li');

// 遍历每个列表项
items.forEach(item => {
  // 获取百分比值
  const percentage = parseInt(item.querySelector('.percentage').textContent);

  // 根据百分比值添加不同的颜色类名
  if (percentage < 50) {
    item.querySelector('.icon').classList.add('red');
  } else if (percentage < 80) {
    item.querySelector('.icon').classList.add('yellow');
  } else {
    item.querySelector('.icon').classList.add('green');
  }
});