使用jQuery变量设置背景图像（线性渐变）

Question

我正在寻找使用使用数字变量的线性渐变来设置div的背景图像。

我不确定如何设置jQuery以拆分SetAttribute并添加变量。

anAmazingSlider.setAttribute("style", "background-image: linear-gradient(to right, #e6e6e6, #e6e6e6 50%, #E74C3C 50%)");

我有一个限制变量，需要将背景％设置为该限制。

Answer 1

jQuery样式设置如下所示：

anAmazingSlider.css({"background-image": "linear-gradient(to right, #e6e6e6, #e6e6e6 50%, #E74C3C 50%)"});

Answer 2

我真的不知道您所说的“ jQuery变量”是什么意思？ 您的代码似乎并不依赖jQuery。

您可以通过将背景与变量连接起来来做到这一点，如下所示：

var amount = 50;
anAmazingSlider.setAttribute("style", "background-image: linear-gradient(to right, #e6e6e6, #e6e6e6 " + amount + "%, #E74C3C 50%)");

这段代码可能会起作用，但是我建议改用以下版本：

var amount = 50;
anAmazingSlider.style.backgroundImage = "linear-gradient(to right, #e6e6e6, #e6e6e6 " + amount + "%, #E74C3C 50%)";

如果您使用的是ES6语法，您甚至可以使用Template文字跳过连接。

var amount = 50;
anAmazingSlider.style.backgroundImage = `linear-gradient(to right, #e6e6e6, #e6e6e6  ${amount}%, #E74C3C 50%)`;

Answer 3

可替换地可能使用CSS变量和定义linear-gradient直在CSS像这样，使用例如0%或其他）作为默认值

Codepen示范

---

的CSS

:root {
   --amount: 0%;
}  

.amazingslider {
   background-image: linear-gradient(to right, #e6e6e6, #e6e6e6 var(--amount), #E74C3C var(--amount))
}

在Javascript中，只需通过更改金额值（例如50% ）

document.documentElement.style.setProperty("--amount", "50%");

变量的更新将立即生效。 显然，这种方法的一个好处是可以使Java脚本中的CSS尽可能地少，并使Java代码更具可维护性。