javascript - 我们可以通过Javascript将渐变应用于li吗(can we apply gradient to li via Javascript)

Question

https://codepen.io/sheetalsinghwd/pen/WNbNBEg

(https://codepen.io/sheetalsinghwd/pen/WNbNBEg)

I am trying to apply gradient through javascript... but linear-gradient does not work for this... want different background every time when 3n+ number is changed.

(我正在尝试通过javascript应用渐变...但是线性渐变对此不起作用...每次更改3n +数字时都需要不同的背景。)

normal background color is successfully applied but gradient is not working for me Tried to Google but didn't found the solution... plz help

(正常背景色已成功应用，但渐变对我不起作用尝试使用Google，但未找到解决方案... plz帮助)

<style id="demo-stylesheet">
        #demo-list :nth-child(3n + 1) { background-color: #FFCC33; }

    </style>

<p>:nth-child(<input id="expr" type="text" value="3n + 1" maxlength="10">) selects <span id="expr-notes">1st, 4th, 7th child and so on</span>.</p>
    <table id="expr-chart">
        <tr>
            <th>n</th>
            <th>3n + 1</th>
        </tr>
        <tr>
            <td>0</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>4</td>
        </tr>
        <tr>
            <td>2</td>
            <td>7</td>
        </tr>
        <tr>
            <td>3</td>
            <td>10</td>
        </tr>
        <tr>
            <td>4</td>
            <td>13</td>
        </tr>
        <tr>
            <td>5</td>
            <td>16</td>
        </tr>
        <tr>
            <td>6</td>
            <td>19</td>
        </tr>
        <tr>
            <td>7</td>
            <td>22</td>
        </tr>
        <tr>
            <td>8</td>
            <td>25</td>
        </tr>
        <tr>
            <td>9</td>
            <td>28</td>
        </tr>
        <tr>
            <td>10</td>
            <td>31</td>
        </tr>
    </table>
    <ol id="demo-list">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ol>

<scrip>

$(function() {
            function ordinalSuffixOf(i) {
                /*
                 * https://stackoverflow.com/a/13627586/87015
                 */
                var j = i % 10, k = i % 100;
                if (j == 1 && k != 11) {
                    return i + "st";
                }
                if (j == 2 && k != 12) {
                    return i + "nd";
                }
                if (j == 3 && k != 13) {
                    return i + "rd";
                }
                return i + "th";
            }
            function updateUI() {
                var $expr = $("#expr"),
                    $notes = $("#expr-notes"),
                    $label = $("#expr-chart th:nth-child(2)"),
                    $cells = $("#expr-chart td:nth-child(2)"),
                    $stylesheet = $("#demo-stylesheet"),
                    expr1 = $expr.val(),
                    regex = /^s*(?:([-+]?d*)n(s*[-+]s*d+)?|([-+]?d+))s*$/,
                    match = expr1.match(regex),
                    a,
                    b;
                if (match === null) {
                    $expr.addClass("error");
                    $notes.text("");
                    $label.text("");
                    $cells.text("");
                    $stylesheet.text("");
                    return;
                }
                a = match[1] === undefined ? 0 : +(match[1] === "" || match[1] === "-" || match[1] === "+" ? match[1].concat("1") : match[1]);
                b = match[2] === undefined && match[3] === undefined ? 0 : +(match[2] || match[3]).replace(/s/g, "");
                $notes.text(function() {
                    var n = 0,
                        result,
                        results = [];
                    do {
                        result = a * n + b;
                        if (result > 0) {
                            results.push(ordinalSuffixOf(result));
                        } else if (a <= 0) {
                            break;
                        }
                        n++;
                    } while (results.length < 3 && (a > 0 || result > 0));
                    return results.length === 0 ? "nothing" : results.join(", ").concat(results.length === 1 ? " child" : " child and so on");
                });
                $label.text(expr1);
                $cells.text(function(n) {
                    return a * n + b;
                });
                if(b==2, b==5){
         $stylesheet.text("#demo-list :nth-child(" + expr1 + ") { background-color: green; }");
       }else if(b==3, b==6){
         $stylesheet.text("#demo-list :nth-child(" + expr1 + ") { background-color: red; }");
       }else if(b==4, b==7){
         $stylesheet.text("#demo-list :nth-child(" + expr1 + ") { background-color: blue; }");
       }else{
         $stylesheet.text("#demo-list :nth-child(" + expr1 + ") { background-color: { background-color: linear-gradient(#000, #fff);; }");
       }       
            }
            $("#expr").on("focus keydown blur", function() {
                this.className = "";
                if (this.timeout) {
                    window.clearTimeout(this.timeout);
                }
                this.timeout = window.setTimeout(updateUI, 1000);
            });
        });

</script>

  ask by Ms Designer translate from so

Answer 1

等待大神答复