Firefox で JavaScript を使用して CSS グラデーションを編集する作業を行っています。ユーザーが入力できる入力ボックスがあります 1. 方向 2. 1 番目の色 3. 2 番目の色
ここに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 つの値を変更するには、どの行を使用できますか? 必要なのは1行か2行だけだと思います。
PS この例は Firefox でのみ機能することを認識しています。さまざまなブラウザーで作業する前に、概念を理解したいだけです。