javascript - 动态更新线性渐变 CSS

Question

如何使用 javascript/Jquery 动态更改线性渐变的参数值？我必须根据用户选择和范围 slider 值分别更改颜色及其百分比。 我写了下面的代码，但它不工作。由于我们必须将线性梯度放在 ""中，并且由于双引号，所有参数都变成了简单的字符串。

var gradColor1 = `${this.color1} ${percentage}%`;
var gradColor1 = `${this.color1} ${percentage}%`;
slider.style.background =linear-gradient(to left, gradColor1, gradColor1);

Answer 1

问题是因为您需要将中的值连接到您设置为 style.backgroud 值的字符串中。由于您已经在使用模板文字，请尝试以下操作:

slider.style.background = `linear-gradient(to left, ${gradColor1}, ${gradColor1})`

请注意，如果要指定渐变，则需要两种颜色，如下所示:

var percentage1 = 50;
var color1 = "#C00";
var percentage2 = 100;
var color2 = "#000";

slider.style.background = `linear-gradient(to left, ${color1} ${percentage1}%, ${color2} ${percentage2}%)`;

#slider {
  width: 200px;
  height: 200px;
}

<div id="slider"></div>

最后，请注意，除非您在 JS 中动态计算颜色，否则最好只使用 CSS 设置背景，如下所示:

#slider {
  width: 200px;
  height: 200px;
  background: linear-gradient(to left, #C00 50%, #000 100%);
}

<div id="slider"></div>