Usare JavaScript per modificare il gradiente CSS

Sto lavorando alla modifica dei gradienti CSS tramite JavaScript in Firefox. Ho caselle di input in cui l’utente può inserire 1. Orientamento 2. 1 ° Colore 3. 2 ° Colore

Ecco l’html

  Linear Gradient Control  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); };   #mainHolder { width:500px; background: -moz-linear-gradient(left, green, red); }    

Gradient Editor

orientation
first color
second color
Content

Quindi per ricapitolare, l’utente specificherà i loro 3 valori, che verranno passati alla funzione ‘renderButton ();’. Quale linea posso usare per modificare i 3 valori del gradiente CSS3 in modo che l’utente possa creare le proprie caselle sfumate personalizzate? Sto assumendo che sia solo una o due righe di cui avrò bisogno.

PS Mi rendo conto che questo esempio funziona solo con Firefox. Voglio solo eliminare il concetto prima di lavorare su diversi browser.

    Inizia con qualcosa di simile al seguente:

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

    Se è necessario supportare più browser di Firefox, sarà necessario farlo in combinazione con lo sniffing del browser o con il rilevamento di funzionalità di tipo Modernizr.

    Di seguito è riportato un esempio di come ciò può essere fatto, utilizzando il rilevamento delle funzionalità simile a Modernizr (testato in 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 + ')';