Usando JavaScript para editar o gradiente CSS
Eu estou trabalhando na edição de gradientes CSS através de JavaScript no Firefox. Eu tenho caixas de entrada onde o usuário pode colocar 1. Orientação 2. 1 Cor 3. 2 Cor
Aqui está o 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>
Então, para recapitular, o usuário irá especificar seus 3 valores, que são passados para a função 'renderButton ();'. Qual linha posso usar para alterar os 3 valores do gradiente CSS3 para que o usuário possa criar suas próprias caixas de gradientes personalizadas? Estou assumindo que é apenas uma linha ou duas que eu precisarei.
P.S. Eu percebo que este exemplo só funciona no Firefox. Eu só quero começar o conceito antes de trabalhar em diferentes navegadores.