如果值大于最大值，则更改进度条颜色答案

【问题标题】：Change Progress Bar color if value is more that max value如果值大于最大值，则更改进度条颜色
【发布时间】：2020-11-05 05:16:58
【问题描述】：

如果值大于设置的最大值，如何更改进度条的颜色。这意味着进度条上的标签可以超过为进度条设置的最大值，如果该值大于最大值，颜色将变为红色。如果值大于最大值，则变为红色，否则变为蓝色。

code:
https://jsbin.com/hamehel/1/edit?html,output

【问题讨论】：

标签： javascript progress-bar

【解决方案1】：

使用比较progress.max 和progress.value 的标志怎么样？

const progress = document.querySelector('#progress');
const up10 = () => {
  progress.value += 10;
  changeStyle();
};
const down10 = () => {
  progress.value -= 10;
  changeStyle();
};
const changeStyle = () => {
  if (progress.max > progress.value) {
    progress.classList.remove('progress-max')
  } else {
    progress.classList.add('progress-max')
  }
}
changeStyle();

.progress-max {
  color: lightblue;
}
.progress-max::-moz-progress-bar {
  background: red;
}
.progress-max::-webkit-progress-bar {
  background: red;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <body>
    <progress id="progress" value="100" max="100"></progress>
    <button onclick="up10()">+ 10</button>
    <button onclick="down10()">-10</button>
  </body>
</html>

【讨论】：

当然可以。关键是如果值等于或大于最大值则添加类，如果值小于最大值则删除类。