Javascript HTML5米标记，使用JS更改渐变颜色

我需要使用js通过使用javascript更改这些百分比值来更改渐变

代码：

仪表：：-webkit仪表最佳值{
盒影：0 5px 5px-5px#999插图；
背景图像：线性梯度（90度、f44336 24%、e6d450 24%、e6d450 56%、4CAF50 56%、4CAF50 100%）；
背景大小：100%100%；
}

---

使用javascript，您必须像这样更改value属性，并将这些变量添加到您的样式中：

var element = document.getElementsByTagName("meter")[0];
element.setAttribute("value", "100");
element.setAttribute("style", "--error: 10%;--warning: 20%;--ok: 100%;");

同时，为您的

仪表

标记一个

min

和一个

max

属性：

<meter value="0" max="100" min="0"></meter>

因此，这应该起到作用：

var-element=document.getElementsByTagName（“meter”）[0]；
元素。setAttribute（“值”、“100”）；
setAttribute（“样式”，“--错误：10%；--警告：20%；--确定：100%；”
仪表{
--误差：24%；
--警告：56%；
--ok:100%；
}
仪表：：-webkit仪表最佳值{
盒影：0 5px 5px-5px#999插图；
背景图像：线性梯度（90度，#f44336 var（--错误），#e6d450 var（--错误），#e6d450 var（--警告），#4CAF50 var（--警告），#4CAF50 var（--正常）；
背景大小：100%100%；
}
只需使用JavaScript（document.styleSheets），您就可以访问样式表，然后可以找到backgroundImage样式并设置所需的值，如下所示：

document.styleSheets[0].cssRules[0].style.backgroundImage = "linear-gradient(90deg, rgb(0, 0, 0) 5%, rgb(230, 212, 80) 5%, rgb(230, 212, 80) 15%, rgb(242, 143, 104) 15%, rgb(242, 143, 104) 55%, rgb(207, 130, 191) 55%, rgb(207, 130, 191) 95%, rgb(113, 159, 209) 95%, rgb(113, 159, 209) 100%)"

你到底想换哪一部分？当值处于最佳区域（Webkit中默认为绿色）时，仅填充条？我想在调用API时将这些百分比值24%、56%等更改为其他值。为什么不只更改
low
和
high
属性，这些值是从哪得来的？我需要控制梯度。我需要用这个仪表显示错误，警告信息，这是我从API调用中得到的。我需要用三种颜色来显示，你们可以在这里看到。客户不需要第四种颜色（灰色）。谢谢。我建议使用
element.style.setProperty
或
element.style[]
接口从JS设置CSS变量。（例如，
element.style.setProperty（“--error”，“10%”；
或
element.style[“--error”]=“10%”；
）使用
.setAttribute
设置元素的属性，该属性反过来设置DOM元素的属性，有点像过山车，通常被认为是不好的做法。我还建议为这种方法在CSS变量的跨浏览器compat上添加一个警告/gotcha，作为提示：
document.styleSheets[0].cssRules[0].style.backgroundImage = "linear-gradient(90deg, rgb(0, 0, 0) 5%, rgb(230, 212, 80) 5%, rgb(230, 212, 80) 15%, rgb(242, 143, 104) 15%, rgb(242, 143, 104) 55%, rgb(207, 130, 191) 55%, rgb(207, 130, 191) 95%, rgb(113, 159, 209) 95%, rgb(113, 159, 209) 100%)"