How can I change linear-gradient percentage via JavaScript?

Question

I want to make a circle background to fill in gradually using linear-gradient. I have my CSS and JavaScrpit file, only I can't figure out how to select the linear-gradient property in 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 = ????
            }
        }
    }

Does your CSS selector even work? The ID of the element is `type3`, not `circle`! — BenM, Feb 20 '17 at 17:42
Something like this: `elem.style.backgroundImage = "linear-gradient(90deg, #FFC0CB " + from + "%, white " + to + "%);` — , Feb 20 '17 at 17:44
Possible duplicate of [Set CSS attribute in Javascript?](http://stackoverflow.com/questions/5195303/set-css-attribute-in-javascript) — AmericanUmlaut, Feb 20 '17 at 17:45

score 2 · Answer 1 · answered Feb 20 '17 at 17:44

Just define it as a string:

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>

How can I change linear-gradient percentage via JavaScript?

1 Answers1