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 literal跳过连接。

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

Answer 3

或者，您可以使用CSS variables并在linear-gradient中直接定义CSS，例如，使用例如0%（或其他）作为默认值

Codepen demo

<强> 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%");

变量的更新将立即生效。这种方法的一个好处显然是从Javascript中尽可能多地保留CSS，让你的Javascript代码更具可持续性。

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

3 个答案: