javascript - 动态改变条形颜色

Question

问题陈述:

我想创建一个根据我提供的数字改变颜色的条。条形图会随着过渡而上下移动。例如:如果数字是 80:悬停条将从红色开始，在 50 左右会变成浅红色，当它达到 80 时会变成几乎绿色。

根据我的代码，我可以通过修改白色百分比来实现这一点。我可以通过任何方式将数字发送到 css，以便 linear-gradient 属性获取它。

这是我的代码:

.container{
    border: 4px solid black;
    width: 40px;
    height: 600px;
    background-size: 100% 200%;
    background-image: linear-gradient(white 50%,green 50%,red);
    transition: background-position 1s ease-in-out;
}

.container:hover{
    background-position: 0 100%;
}

<div class="container">
</div>

Answer 1

可以将变量值直接传递到您的 css 类中。您可以通过 var(--NameOfYourVar) 在 css 中定义自定义变量。在您的 html 部分中，您可以使用 style 属性将值传递给您的变量。

.container{
    border: 4px solid black;
    width: 40px;
    height: 600px;
    background-size: 100% 200%;
    background-image: linear-gradient(white var(--myVar),green 50%,red);
    transition: background-position 1s ease-in-out;
}

.container:hover{
    background-position: 0 100%;
}

<div class="container" style="--myVar: 80%;">
</div>

但我不确定这是否已被所有浏览器完全支持。