Usando JavaScript para editar gradiente CSS

Question

Feb 25, 2013, 05:01 PM

javascript linear-gradients browser firefox css

Usando JavaScript para editar gradiente CSS

Estoy trabajando en la edición de gradientes CSS a través de JavaScript en Firefox. Tengo cuadros de entrada donde el usuario puede poner 1. Orientación 2. 1er Color 3. 2do Color

Aquí está el 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>

Entonces, para recapitular, el usuario especificará sus 3 valores, que se pasan a la función 'renderButton ();'. ¿Qué línea puedo usar para cambiar los 3 valores del gradiente CSS3 para que el usuario pueda crear sus propios cuadros de gradiente personalizados? Supongo que es solo una o dos líneas que necesitaré.

PD Me doy cuenta de que este ejemplo solo funciona en Firefox. Solo quiero entender el concepto antes de trabajar en diferentes navegadores.