如何基于宽度百分比为skill/skill-level元素变更进度条颜色

嘿，我来帮你搞定这个问题！你遇到的核心问题是getElementsByClassName('skill_level')返回的是一个HTMLCollection（类数组对象），不能直接批量修改样式，得逐个遍历元素才行。另外还要注意正确获取元素的实际宽度，不然判断逻辑会出错。

步骤拆解 #

1. 获取所有skill_level元素
   用getElementsByClassName拿到的是类数组，我们可以把它转成数组，或者用传统的for循环遍历：

   // 获取元素集合
   const skillLevels = document.getElementsByClassName('skill_level');
   

2. 遍历每个元素并检查宽度
   要获取元素实际渲染的宽度，得用window.getComputedStyle()，因为直接取element.style.width只能拿到内联样式里的宽度，CSS类设置的宽度拿不到。然后把宽度转成百分比数值，再做判断：

   // 转成数组后用forEach遍历（更简洁）
   Array.from(skillLevels).forEach(level => {
     // 获取计算后的样式
     const computedStyle = window.getComputedStyle(level);
     // 把宽度字符串（比如"33%"）转成数值
     const widthPercent = parseFloat(computedStyle.width);
     
     // 根据宽度范围设置颜色
     if (widthPercent >= 33 && widthPercent <= 66) {
       level.style.backgroundColor = 'orange'; // 或者用具体色值#FFA500
     }
   });
   

   如果你习惯用for循环，也可以这么写：

   for (let i = 0; i < skillLevels.length; i++) {
     const level = skillLevels[i];
     const computedStyle = window.getComputedStyle(level);
     const widthPercent = parseFloat(computedStyle.width);
     
     if (widthPercent >= 33 && widthPercent <= 66) {
       level.style.backgroundColor = 'orange';
     }
   }
   

3. 确保DOM加载完成再执行
   一定要把JS代码放在DOM加载完成后执行，不然页面还没渲染完，会找不到元素。可以用DOMContentLoaded事件：

   document.addEventListener('DOMContentLoaded', function() {
     // 上面的遍历代码放这里
   });
   

完整示例（结合你的CSS） #

假设的HTML结构

<div class="skill">
  <div class="skill_level" style="width: 33%"></div>
</div>
<div class="skill">
  <div class="skill_level" style="width: 50%"></div>
</div>
<div class="skill">
  <div class="skill_level" style="width: 70%"></div>
</div>

你的CSS补充完整

.skill {
  background: #262626;
  height: 20px;
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0;
  border-radius: 10px; /* 可选，加个圆角更美观 */
}
.skill_level {
  height: 100%;
  background: #ccc; /* 默认灰色进度条 */
  border-radius: 10px;
}

最终JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const skillLevels = document.getElementsByClassName('skill_level');
  
  Array.from(skillLevels).forEach(level => {
    const computedStyle = window.getComputedStyle(level);
    const widthPercent = parseFloat(computedStyle.width);
    
    if (widthPercent >= 33 && widthPercent <= 66) {
      level.style.backgroundColor = 'orange';
    }
    // 可以扩展其他逻辑，比如宽度>66%设绿色
    // else if (widthPercent > 66) {
    //   level.style.backgroundColor = 'limegreen';
    // }
  });
});

常见坑点提醒 #

• 不要直接用skillLevels.forEach()，因为HTMLCollection不是数组，没有forEach方法，必须用Array.from()转成数组，或者用[...skillLevels]展开运算符。
• 如果你的skill_level宽度是通过CSS类设置的（不是内联style），一定要用getComputedStyle获取宽度，不然拿不到正确值。

内容的提问来源于stack exchange，提问作者oudekaas