Verwenden von JavaScript zum Bearbeiten von CSS-Verläufen
Ich arbeite an der Bearbeitung von CSS-Verläufen mit JavaScript in Firefox. Ich habe Eingabefelder, in die der Benutzer 1. Orientierung 2. 1. Farbe 3. 2. Farbe eingeben kann
Hier ist das 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>
Um es noch einmal zusammenzufassen, der Benutzer gibt seine 3 Werte an, die an die Funktion 'renderButton ();' übergeben werden. In welcher Zeile kann ich die 3 Werte des CSS3-Verlaufs ändern, sodass der Benutzer seine eigenen benutzerdefinierten Verlaufsfelder erstellen kann? Ich gehe davon aus, dass ich nur ein oder zwei Zeilen brauche.
P.S. Mir ist klar, dass dieses Beispiel nur in Firefox funktioniert. Ich möchte nur das Konzept verdeutlichen, bevor ich an verschiedenen Browsern arbeite.