jQuery 语法：-linear-gradient("color", white) with "color" 作为变量

Question

我有一个 <div> 可以根据给定的 百分比 改变它的颜色

ProgressBar.color = function(value, maxVal) {
    var bcolor;
    var color;
    var percentage = (value / maxVal) * 100;
    //For each percentage, different colors
    if (percentage >= 0 && percentage < 25) {
        bcolor = "green";
        color = "black";
    } else if (percentage >= 25 && percentage < 50) {
        bcolor = "yellow";
        color = "green";
    } else if (percentage >= 50 && percentage < 75) {
        bcolor = "orange";
        color = "blue";
    } else if (percentage >= 75 && percentage <= 100) {
        bcolor = "red";
        color = "black";
    }

    //Setters
    $('#bar').css("background-color", bcolor);
    $('#bar').css("color", color);
};

但现在我想添加一些渐变效果。我的问题是：

当您使用变量作为颜色时，-linear-gradient() 的语法是什么？

我有这个，但它不起作用：

$('#bar').css("background", "-moz-linear-gradient('bcolor', white, 'bcolor')");

Answer 1

您只需按如下方式连接变量：

$('#bar')
    .css("background", "-moz-linear-gradient(" + bcolor + ", white, " + bcolor + ")");
//                                           ^^^^^^^^^^^^^^^        ^^^^^^^^^^^^^^

Answer 2

一个简单的方法是使用字符串连接："-moz-linear-gradient('" + bcolor + "', white, '" + bcolor + "')"

jQuery 语法：-linear-gradient("color", white) with "color" 作为变量

jQuery Syntax: -linear-gradient("color", white) with "color" as variable

javascript

jquery

css

linear-gradients

radial-gradients