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.

dascandy · Accepted Answer · 2016-03-24 13:49:28Z

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, 2016 at 13:49

dascandy

7,3221 gold badge31 silver badges51 bronze badges

answered Feb 25, 2013 at 16:16

Matt Coughlin

18.9k3 gold badges48 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Matt Coughlin Over a year ago

@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.

onTheInternet Over a year ago

You answered my question two days ago but i will still upvote this answer as well. Thank you!

WebWanderer Over a year ago

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 Over a year ago

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 Over a year ago

Yea, I still can't get this to work, but I tried to fix it. Still a cool attempt though.

|

Collectives™ on Stack Overflow

Using JavaScript to edit CSS gradient

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related