Usar JavaScript para editar gradiente de CSS

Estoy trabajando en la edición de degradados CSS a través de JavaScript en Firefox. Tengo cuadros de input donde el usuario puede poner 1. Orientación 2. Primer color 3. Segundo 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, networking); } </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 pasan a la function 'renderButton ();'. ¿Qué línea puedo usar para cambiar los 3 valores del degradado CSS3 para que el usuario pueda crear sus propios cuadros de degradado personalizados? Supongo que es solo una o dos líneas que necesitaré.

PD. Me doy count de que este ejemplo solo funciona en Firefox. Solo quiero descifrar el concepto antes de trabajar en diferentes browseres.

Comience con algo como lo siguiente:

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

Si necesita admitir más browseres que Firefox, deberá hacerlo en combinación con el rastreo del browser o con la detección de características similares a las de Modernizr.

A continuación se muestra un ejemplo de cómo se puede hacer esto, utilizando detección de funciones similar a Modernizr (probado en Firefox, Chrome, Safari, Opera).

 // Detect which browser prefix to use for the specified CSS value // (eg, 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 + ')';