Using JavaScript to edit CSS gradient

问题

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.

回答1:

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 + ')';

来源：https://stackoverflow.com/questions/15071062/using-javascript-to-edit-css-gradient

标签

javascript

css

firefox

browser

linear-gradients