如何通过JS或CSS修改Progress Bar（进度条）的颜色

嘿，针对你用的原生<progress>元素，我给你两种靠谱的修改颜色方案，结合你现有的代码来调整：

一、用CSS自定义颜色（推荐，更灵活） #

原生进度条的样式需要针对不同浏览器的伪元素调整，因为不同浏览器对<progress>的渲染逻辑不一样。你可以在现有CSS基础上补充这些样式：

.progress.is-large { 
  height: 40px; 
  /* 进度条未填充部分的背景色 */
  background-color: #f5f5f5;
}

/* 适配Chrome、Safari等WebKit内核浏览器 */
.progress.is-large::-webkit-progress-value {
  background-color: #25d366; /* 自定义填充颜色，这里用微信绿举例 */
}
.progress.is-large::-webkit-progress-bar {
  background-color: #f5f5f5; /* 背景色要和外层统一 */
}

/* 适配Firefox浏览器 */
.progress.is-large::-moz-progress-bar {
  background-color: #25d366;
}

另外，从你的is-info、is-large类能看出来用了Bulma框架，其实也可以直接替换框架自带的颜色类，比如把is-info换成is-success（绿色）、is-danger（红色）、is-warning（黄色），框架会自动帮你处理颜色样式~

二、用JavaScript动态修改颜色 #

如果需要根据进度值动态变色（比如进度低于30%显示红色，高于70%显示绿色），可以通过JS切换类名或修改CSS变量实现：

方法1：动态切换预定义类 #

先在CSS里定义不同颜色的类：

.progress.low::-webkit-progress-value,
.progress.low::-moz-progress-bar {
  background-color: #e74c3c; /* 红色表示低进度 */
}
.progress.high::-webkit-progress-value,
.progress.high::-moz-progress-bar {
  background-color: #2ecc71; /* 绿色表示高进度 */
}

然后修改你的frame函数，根据进度值切换类：

function move() { 
  var progress = document.getElementById("progressbar"); 
  var width = 1; 
  var id = setInterval(frame, 10); 
  function frame() { 
    if (width >= 100) { 
      clearInterval(id);
      // 进度完成后设为高进度颜色
      progress.classList.add('high');
      progress.classList.remove('low');
    } else { 
      width++; 
      progress.value = width;
      // 根据进度区间切换颜色
      if (width < 30) {
        progress.classList.add('low');
        progress.classList.remove('high');
      } else if (width >= 70) {
        progress.classList.add('high');
        progress.classList.remove('low');
      }
    } 
  } 
}

方法2：动态生成渐变颜色（用CSS变量） #

先在CSS里绑定变量：

.progress.is-large::-webkit-progress-value {
  background-color: var(--progress-color);
}
.progress.is-large::-moz-progress-bar {
  background-color: var(--progress-color);
}

然后在JS里随进度动态设置变量值：

function move() { 
  var progress = document.getElementById("progressbar"); 
  var width = 1; 
  var id = setInterval(frame, 10); 
  function frame() { 
    if (width >= 100) { 
      clearInterval(id);
      progress.style.setProperty('--progress-color', '#2ecc71');
    } else { 
      width++; 
      progress.value = width;
      // 实现从红到绿的渐变效果
      var red = Math.max(0, 255 - Math.floor(width * 2.55));
      var green = Math.min(255, Math.floor(width * 2.55));
      var dynamicColor = `rgb(${red}, ${green}, 0)`;
      progress.style.setProperty('--progress-color', dynamicColor);
    } 
  } 
}

最后提个小细节：你的HTML里<progress>的max属性没写完整，应该改成max="100"：

<progress id="progressbar" class="progress is-large is-info" max="100"></progress>

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