Использование 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. Я просто хочу изложить концепцию, прежде чем работать в разных браузерах.