Использование JavaScript для редактирования CSS-градиента

Я работаю над редактированием CSS-градиентов с помощью JavaScript в Firefox. У меня есть поля ввода, где пользователь может поставить 1. Ориентация 2. Первый цвет 3. Второй цвет

Вот 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>

Напомним, что пользователь укажет свои 3 значения, которые передаются в функцию 'renderButton ();'. Какую строку я могу использовать, чтобы изменить 3 значения градиента CSS3, чтобы пользователь мог создавать свои собственные градиенты? Я предполагаю, что мне понадобится только одна или две строки.

Постскриптум Я понимаю, что этот пример работает только в Firefox. Я просто хочу изложить концепцию, прежде чем работать в разных браузерах.

Ответы на вопрос(1)

Ваш ответ на вопрос