web-dev-qa-db-fra.com

Utilisation de JavaScript pour modifier le dégradé CSS

Je travaille sur l'édition de dégradés CSS via JavaScript dans Firefox. J'ai des zones de saisie où l'utilisateur peut mettre 1. Orientation 2. 1ère couleur 3. 2ème couleur

Voici le 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écapituler, l'utilisateur spécifiera ses 3 valeurs, qui seront passées à la fonction 'renderButton ();'. Quelle ligne puis-je utiliser pour modifier les 3 valeurs du dégradé CSS3 afin que l'utilisateur puisse créer ses propres zones de dégradé personnalisées? Je suppose que ce n'est qu'une ligne ou deux dont j'aurai besoin.

P.S. Je me rends compte que cet exemple ne fonctionne que dans Firefox. Je veux juste comprendre le concept avant de travailler sur différents navigateurs.

javascriptcssfirefoxbrowserlinear-gradients
14
onTheInternet

Commencez avec quelque chose comme ce qui suit:

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

Si vous devez prendre en charge plus de navigateurs que Firefox, cela devra être fait en combinaison avec le sniffing du navigateur ou une détection de fonctionnalité de type Modernizr.

Vous trouverez ci-dessous un exemple de la façon dont cela peut être fait, en utilisant une détection de fonctionnalités similaire à Modernizr (testé dans 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 + ')';
26
Matt Coughlin