如何通过 JavaScript 更改线性渐变百分比？答案

【问题标题】：How can I change linear-gradient percentage via JavaScript?如何通过 JavaScript 更改线性渐变百分比？
【发布时间】：2017-02-20 17:40:48
【问题描述】：

我想使用线性渐变制作一个圆形背景以逐渐填充。我有我的 CSS 和 JavaScrpit 文件，只是我不知道如何在 JS 中选择线性渐变属性。

 <div id="circle" class="circleBase "></div>
    #circle{
        width: 300px;
        height: 300px;
        background-color:blue;
        background: linear-gradient(90deg, #FFC0CB 0%,white 100%);
    }

    function changeBackground() {
        var elem = document.getElementById("circle"); 
        var width = 1;
        var id = setInterval(frame, 10);
        function frame() {
            if (width >= 100) {
                clearInterval(id);
            } else {
               width++; 
               elem.style = ????
            }
        }
    }

【问题讨论】：

你的 CSS 选择器还能工作吗？元素的 ID 是type3，而不是circle！
类似这样的东西：elem.style.backgroundImage = "linear-gradient(90deg, #FFC0CB " + from + "%, white " + to + "%);
已编辑：我在那里使用圆圈
Set CSS attribute in Javascript?的可能重复

标签： javascript html css linear-gradients

【解决方案1】：

只需将其定义为字符串即可：

elem.style.background = 'linear-gradient(180deg, #FFC0CB 0%,white 100%)';

function changeBackground() {
        var elem = document.getElementById("circle"); 
        var width = 1;
        var id = setInterval(frame, 10);
        function frame() {
            if (width >= 100) {
                clearInterval(id);
            } else {
               width++; 
               elem.style.background = 'linear-gradient(180deg, #FFC0CB 0%,white 100%)';
            }
        }
    }

#circle{
        width: 300px;
        height: 300px;
        background-color:blue;
        background: linear-gradient(90deg, #FFC0CB 0%,white 100%);
    }

<div id="circle"></div>
<button onclick="changeBackground()">Change!</button>

【讨论】：