Question

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

代码：

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

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));
}

所以这应该做的工作：

＆＃13;

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

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 2

只需使用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%)"

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

2 个答案: