我正在通过Firefox中的JavaScript编辑CSS渐变.我有输入框,用户可以放置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();'.我可以使用哪一行来更改CSS3渐变的3个值,以便用户可以创建自己的自定义渐变框？我假设我只需要一两行.
PS我意识到这个例子只适用于Firefox.我只想在使用不同的浏览器之前先了解这个概念.