时间戳

首页 > 解决方案 > 如何更改“progress[value]::-webkit-progress-value”属性的颜色？

javascript - 如何更改“progress[value]::-webkit-progress-value”属性的颜色？

问题描述

怎么改变颜色

progress[value]::-webkit-progress-value {
                background-color: #00bdf8;
            }

在用户选择的不同值下，当用户选择 30% 时，颜色应为红色，在 60% 时，它将为黄色，然后是绿色

<input type="range" max="100" step="1" class="inputseekbar" id="range">
 <progress max="100" id="progressbarcolor"></progress>
 <output for="range" class="output"></output>

什么是 JS 或 Jquery在此处输入图像描述

<output>标签用于显示“%”。

标签： javascriptjqueryhtmlcss

解决方案

我会使用 CSS 变量并根据进度的值使用 JS 调整值。

这是一个基本示例：

var progress = document.querySelectorAll("progress");
for(var i = 0;i<progress.length;i++) {
   var n = 2 * parseInt(progress[i].getAttribute("value"));
   progress[i].style.setProperty("--c", "rgb("+n+","+n+",20)");
}
progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

progress::-webkit-progress-bar {
  background:grey;
}
progress::-webkit-progress-value {  
  background-color: var(--c,red);
}
<progress max="100"  value="20"></progress>
<progress max="100"  value="50"></progress>
<progress max="100"  value="60"></progress>
<progress max="100"  value="100"></progress>

您也可以在更改时轻松完成：

var progress = document.querySelector("progress");

document.querySelector("input").addEventListener('input', function (evt) {
   progress.setAttribute('value',this.value);
   progress.style.setProperty("--c", "rgb("+2*this.value+","+2*this.value+",20)");
});
progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

progress::-webkit-progress-bar {
  background:grey;
}
progress::-webkit-progress-value {  
  background-color: var(--c,red);
}
<input type="range" max="100" step="1" class="inputseekbar" id="range">
<progress max="100"  value="50"></progress>

有关的：

如何使用 Javascript 更新占位符颜色？

使用 jQuery 选择和操作 CSS 伪元素，例如 ::before 和 ::after

推荐阅读