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つの値を変更するためにどの線を使用できますか?私が必要とするのは1行か2行だけであると想定しています。
追伸この例はFirefoxでのみ機能することを理解しています。別のブラウザで作業する前に、コンセプトを理解したいだけです。
次のようなものから始めます。
var dom = document.getElementById('mainHolder');
dom.style.backgroundImage = '-moz-linear-gradient('
+ orientation + ', ' + colorOne + ', ' + colorTwo + ')';
Firefoxよりも多くのブラウザーをサポートする必要がある場合は、ブラウザーのスニッフィングまたは一部のModernizrに似た機能の検出と組み合わせて行う必要があります。
以下は、Modernizr(Firefox、Chrome、Safari、Operaでテスト済み)と同様の機能検出を使用して、これを行う方法の例です。
// Detect which browser prefix to use for the specified CSS value
// (e.g., background-image: -moz-linear-gradient(...);
// background-image: -o-linear-gradient(...); etc).
//
function getCssValuePrefix()
{
var rtrnVal = '';//default to standard syntax
var prefixes = ['-o-', '-ms-', '-moz-', '-webkit-'];
// Create a temporary DOM object for testing
var dom = document.createElement('div');
for (var i = 0; i < prefixes.length; i++)
{
// Attempt to set the style
dom.style.background = prefixes[i] + 'linear-gradient(#000000, #ffffff)';
// Detect if the style was successfully set
if (dom.style.background)
{
rtrnVal = prefixes[i];
}
}
dom = null;
delete dom;
return rtrnVal;
}
// Setting the gradient with the proper prefix
dom.style.backgroundImage = getCssValuePrefix() + 'linear-gradient('
+ orientation + ', ' + colorOne + ', ' + colorTwo + ')';