javascript - HTML5 meter标签，使用JS改变渐变颜色

Question

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

代码:

meter::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient( 90deg, #f44336 24%,#e6d450 24%,#e6d450 56%,#4CAF50 56%,#4CAF50 100%);
  background-size: 100% 100%;
}

<meter value="1"></meter>

Answer 1

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

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

同时给你的 meter 标签一个 min 和一个 max 属性:

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

并在您的 CSS 中添加变量:

meter {
  --error: 24%;
  --warning: 56%;
  --ok: 100%;
}

meter::-webkit-meter-optimum-value {
  background-image: linear-gradient( 90deg, #f44336 var(--error),#e6d450 var(--error),#e6d450 var(--warning),#4CAF50 var(--warning),#4CAF50 var(--ok));
}

所以这应该可以完成工作:

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

meter {
  --error: 24%;
  --warning: 56%;
  --ok: 100%;
}

meter::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient( 90deg, #f44336 var(--error),#e6d450 var(--error),#e6d450 var(--warning),#4CAF50 var(--warning),#4CAF50 var(--ok));
  background-size: 100% 100%;
}

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