jquery 的 .css() 和梯度

Question

我已经查看了几个问题，但我似乎无法使 .css() 使用我想要的变量和梯度。你应该能够将两种颜色放入输入中，然后 BANG 它会给你一个渐变但没有骰子。有什么建议吗？

下面是我的JQ：

$(document).ready(function () {
var colorTop = $("#color1").keyup(function () {
    var color1 = $("#color1").val();
    $("#demo").css("background", color1);
});

var colorBottom = $("#color2").keyup(function () {
    var color2 = $("#color2").val();
    $("#demo").css("background", color2);
});

function changeGradient(colorTop, colorBottom) {
    $("#demo").css({
        background: 'linear-gradient(' + colorTop + ', ' + colorBottom + ')'
    });
};
});

https://jsfiddle.net/xyhjppph/3/

Answer 1

您没有在任何地方打电话给 changeGradient。我建议添加一个按钮，当单击以更改背景时，该按钮将获取两个输入的输出。

像这样https://jsfiddle.net/jyh18cnk/1/

或者，如果您不需要该按钮，您可以将颜色变量设置为全局变量

像这样https://jsfiddle.net/ao0escev/1/

jquery 的 .css() 和梯度

jquery's .css() and gradients

jquery

gradient