Using JavaScript to edit CSS gradient

Question

I am working on editing CSS gradients through JavaScript in Firefox. I have input boxes where the user can put 1. Orientation 2. 1st Color 3. 2nd Color

Here is the html

<html>
    <head>
        <title>Linear Gradient Control</title>
        <script>
            function renderButton(){ 
            var orientation = document.getElementById("firstValue").value;
            var colorOne = document.getElementById("firstColor").value;
            var colorTwo = document.getElementById("secondColor").value;
            //alert(orientation);
            //alert(colorOne);
            //alert(colorTwo);

            };
        </script>
        <style>
            #mainHolder
            {
            width:500px;
            background: -moz-linear-gradient(left,  green,  red);

            }
        </style>
    </head>
    <body>
        <h1>Gradient Editor</h1>
        <form>
            <input type="text" id="firstValue">orientation</input><br />
            <input type="text" id="firstColor">first color</input><br />
            <input type="text" id="secondColor">second color</input><br />
        </form>
        <button type="button" onclick="renderButton()">Render</button>
        <div id="mainHolder">Content</div>
    </body>
</html>

So to recap, the user will specify their 3 values, which get passed to the function 'renderButton();'. What line can I use to change the 3 values of the CSS3 gradient so that the user can make their own custom gradient boxes? I'm assuming its only a line or two that I will need.

P.S. I realize this example only works in Firefox. I just want to get the concept down before working on different browsers.

score 36 · Accepted Answer · edited Mar 24 '16 at 13:49

36

Start with something like the following:

var dom = document.getElementById('mainHolder');
dom.style.backgroundImage = '-moz-linear-gradient('
        + orientation + ', ' + colorOne + ', ' + colorTwo + ')';

If you need to support more browsers than Firefox, this will need to be done in combination with either browser-sniffing or some Modernizr-like feature detection.

Below is an example of how this can be done, using feature-detection similar to Modernizr (tested in Firefox, Chrome, Safari, Opera).

// Detect which browser prefix to use for the specified CSS value
// (e.g., background-image: -moz-linear-gradient(...);
//        background-image:   -o-linear-gradient(...); etc).
//

function getCssValuePrefix()
{
    var rtrnVal = '';//default to standard syntax
    var prefixes = ['-o-', '-ms-', '-moz-', '-webkit-'];

    // Create a temporary DOM object for testing
    var dom = document.createElement('div');

    for (var i = 0; i < prefixes.length; i++)
    {
        // Attempt to set the style
        dom.style.background = prefixes[i] + 'linear-gradient(#000000, #ffffff)';

        // Detect if the style was successfully set
        if (dom.style.background)
        {
            rtrnVal = prefixes[i];
        }
    }

    dom = null;
    delete dom;

    return rtrnVal;
}

// Setting the gradient with the proper prefix
dom.style.backgroundImage = getCssValuePrefix() + 'linear-gradient('
        + orientation + ', ' + colorOne + ', ' + colorTwo + ')';

edited Mar 24 '16 at 13:49

dascandy

7,184
1
29
50

answered Feb 25 '13 at 16:16

Matt Coughlin

18,666
3
46
59

1

@user2070478: I added an example of how to support different browsers. Note that IE9 and earlier don't support gradients. Also, there's a different syntax for early versions of webkit that this doesn't cover. – Matt Coughlin Feb 25 '13 at 17:11
You answered my question two days ago but i will still upvote this answer as well. Thank you! – onTheInternet Feb 27 '13 at 18:04
This test will never pass for native syntax. I would suggest setting a variable as a "return value" and setting it to the first "successfully set" prefix instead of returning it that way you can clean up the div you created and destroy it. Initialize the return variable to `""` so that the native syntax is used by default. – WebWanderer Apr 20 '15 at 15:46
Originally, this also would have set an invalid CSS property. My edits should correct these errors with as little code altering as possible. Great post! I hadn't thought about handling this this way. – WebWanderer Apr 20 '15 at 15:51
Yea, I still can't get this to work, but I tried to fix it. Still a cool attempt though. – WebWanderer Apr 20 '15 at 16:10
I would add break; inside the for loop if (dom.style.background) { rtrnVal = prefixes[i]; break; } – Boontawee Home Dec 11 '15 at 14:43
var prefixes = ['', '-webkit-', '-khtml-', '-moz-', '-ms-', '-o-']; – Boontawee Home Dec 11 '15 at 14:47

Using JavaScript to edit CSS gradient

1 Answers1

Linked