Javascript 在JQuery中将css渐变动态应用于元素

我的小提琴-

我正在制作一个简单的HSL颜色选择器，并在dom ready&element on change上动态地将渐变应用于范围输入类型，以更新选择器

// Setup Code Update
$(".cpick-code-hsl").on('change keyup', function() {
  $(this).val( "hsla(" + $(".cpick-hue-text").val() + ", " + $(".cpick-s-text").val() + ", " + $(".cpick-l-text").val() + ", " + $(".cpick-a-text").val() + ")");

  // Apply as body background
  $(".head").css({
    "background": $(".cpick-code-hsl").val()
  });

  $(".cpick-code-rgb").val( $(".head").css("backgroundColor") );

  // Alpha Saturation
  $(".cpick-s").css({
    "background": "linear-gradient(to right, #7f7f80 0%," + "hsl(" + $(".cpick-hue").val() + "," + $(".cpick-s").val() + "%," + $(".cpick-l").val() + "%)" + " 100%)"
  });
  // Alpha Lightness
  $(".cpick-l").css({
    "background": "linear-gradient(to right, #000000 0%," + "hsl(" + $(".cpick-hue").val() + "," + $(".cpick-s").val() + "%," + $(".cpick-l").val() + "%) 50%,#ffffff 100%)"
  });
  // Alpha Preview
  $(".cpick-a").css({
    "background": "linear-gradient(to right, rgba(51,51,51,0) 0%," + "hsl(" + $(".cpick-hue").val() + "," + $(".cpick-s").val() + "%," + $(".cpick-l").val() + "%)" + " 100%)"
  });
});

---

我发现了这个插件，但它在Firefox上不起作用。有人知道更好更简单的解决方案吗？

您有权访问样式表或

元素吗？如果您定义了一个css类，然后使用jQuery将该类添加到您的元素中，那么将更容易、更高性能，并产生更清晰的标记

---

这不是有效的JavaScript语法。检查开发人员控制台。即使您提供了缺少的逗号，您的对象也会多次定义相同的属性？？？可能的重复（标题听起来不像，但正是这个问题——这里有一个答案。）为什么不使用类似于只使用一个背景定义的东西，您不能使用jQuery一次设置多个背景定义，您还必须禁用webkit中的默认样式：，对我来说，您似乎是在重新发明轮子：1）2）3）4）…感谢链接Daniel。前缀是一个比预设值镜像更好的选项。