Utilizzo di 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ò mettere 1. Orientamento 2. 1 ° Colore 3. 2 ° coloreUtilizzo di JavaScript per modificare il gradiente CSS

Ecco l'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>

Quindi, per ricapitolare, l'utente sarà specificare i loro 3 valori , che viene passato 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.

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

fonte

2013-02-25 onTheInternet

iniziare 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, questo dovrà essere fatto in combinazione con il browser-sniffing o qualche caratteristica di rilevamento Modernizr-like.

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

fonte

2013-02-25 16:16:01

Questo ha funzionato !!! Non avevo realizzato che fosse così facile. Grazie mille! – onTheInternet

@ user2070478: ho aggiunto un esempio di come supportare diversi browser. Notare che IE9 e precedenti non supportano le sfumature. Inoltre, c'è una sintassi diversa per le prime versioni del webkit che non copre. –

Hai risposto alla mia domanda due giorni fa, ma continuerò a votare anche questa risposta. Grazie! – onTheInternet

Utilizzo di JavaScript per modificare il gradiente CSS

risposta

Problemi correlati