L'utilisation de JavaScript pour modifier le code CSS gradient

Je suis en train de travailler sur la modification des gradients CSS à l'aide de JavaScript dans Firefox.
J'ai des boîtes d'entrée où l'utilisateur peut mettre
1. Orientation
2. 1er de la Couleur
3. 2ème Couleur

Voici le code 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>

Donc, pour résumer, l'utilisateur de spécifier leurs 3 valeurs, ce qui se passait à la fonction " renderButton();'. Quelle ligne dois-je utiliser pour changer les 3 valeurs de la CSS3 gradient de sorte que l'utilisateur peut faire leur propre dégradé boîtes? Je suis en supposant que son seulement une ligne ou deux, que j'ai besoin.

P. S. je me rends compte que cet exemple ne fonctionne que sous Firefox. Je veux juste que le concept vers le bas avant de travailler sur les différents navigateurs.

OriginalL'auteur onTheInternet | 2013-02-25

  1. 21

    Commencer avec quelque chose comme ce qui suit:

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

    Si vous avez besoin à l'appui de plus en plus de navigateurs que Firefox, cela devra être fait en combinaison avec soit du navigateur-sniffing ou certains Modernizr-comme la détection de fonctionnalité.

    Ci-dessous est un exemple de la façon dont cela peut être fait en utilisant la fonction de détection similaire à Modernizr (testé sous 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 + ')';
    Cela a fonctionné!!! Je n'ai pas réalisé qu'elle était facile. Merci beaucoup!
    J'ai ajouté un exemple de la façon de soutenir les différents navigateurs. Notez que IE9 et versions antérieures ne prennent pas en charge les dégradés. Aussi, il y a une syntaxe différente pour les premières versions de webkit que cela ne couvre pas.
    Vous avez répondu à ma question il y a deux jours mais je vais quand même upvote cette réponse. Merci!!!!
    Ce test sera jamais passer pour un natif de la syntaxe. Je suggère la définition d'une variable comme une "valeur de retour" et le mettre à la première de "réussir ensemble" préfixe au lieu de rentrer de cette façon, vous pouvez nettoyer le div que vous avez créé et de le détruire. Initialiser la variable de retour à "" de sorte que le natif de la syntaxe est utilisée par défaut.
    A l'origine, cette mesure permettrait également d'avoir mis un invalide propriété CSS. Mes modifications doivent corriger ces erreurs avec aussi peu de code à modifier que possible. Après la grande! Je n'avais pas pensé à propos de la manipulation de ce de cette façon.

    OriginalL'auteur Matt Coughlin