如何通过javascript设置背景渐变css

我的样式表指定：

.side-grad {
  background: linear-gradient(to top, #ffdd00 0%, rgba(255, 221, 0, 0) 40%, rgba(255, 221, 0, 0) 100%);
}

我想使用jquery从颜色选择器

input#color gradient

获取输入，覆盖此颜色。我的理解是，我可以对

rgba（）

的rgb组件使用十进制或十六进制代码，因此我在控制台中键入：

>> colorGradient = $("#color-gradient").val()
"#ff00cc"
>> $(".side-grad").css("background",(
     "linear-gradient(to top," 
     + colorGradient 
     + " 0,rgba(" 
     + colorGradient 
     + ",0) 40%,rgba(" 
     + colorGradient 
     + ",0) 100%)"
     )
   );
Object { 0: <div.side-grad>, 1: <div.side-grad>, length: 2, prevObject: Object, context: HTMLDocument → example.html, selector: ".side-grad" }

>colorGradient=$（“#color gradient”）.val（）
“#ff00cc”
>>$（“.side grad”）.css（“背景”(
“线性渐变（到顶部，”
+颜色梯度
+0，rgba（'
+颜色梯度
+，0）40%，rgba（“
+颜色梯度
+ ",0) 100%)"
)
);
对象{0:，1:，长度：2，prevObject:Object，上下文：HTMLDocument→ example.html，选择器：“.side grad”}

---

不会抛出任何错误，但视觉上没有任何更改。如果我设置'background:#ff00cc“没有问题，颜色会按预期变化。我搞砸了什么？

不，你不能在rgba中使用十六进制。

---

以下是正式语法：

创建两个

css

类，然后可以切换。使用

addClass

和

removeClass

这是一个主题可视化工具，因此

。side grad

已经是动态css类。