Używanie JavaScript do edycji gradientu CSS

Question

Feb 25, 2013, 05:01 PM

linear-gradients css javascript firefox browser

Używanie JavaScript do edycji gradientu CSS

Pracuję nad edycją gradientów CSS poprzez JavaScript w Firefoksie. Mam pola wprowadzania, w których użytkownik może umieścić 1. Orientacja 2. Pierwszy kolor 3. Drugi kolor

Oto 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>

Podsumowując, użytkownik określi swoje 3 wartości, które zostaną przekazane do funkcji 'renderButton ();'. Jakiej linii mogę użyć do zmiany 3 wartości gradientu CSS3, aby użytkownik mógł tworzyć własne niestandardowe ramki gradientu? Zakładam, że to tylko jedna lub dwie linie, których będę potrzebować.

P.S. Zdaję sobie sprawę, że ten przykład działa tylko w Firefoksie. Chcę po prostu obniżyć tę koncepcję przed rozpoczęciem pracy z różnymi przeglądarkami.