使用 JavaScript 编辑 CSS 渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15071062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using JavaScript to edit CSS gradient
提问by onTheInternet
I am working on editing CSS gradients through JavaScript in Firefox. I have input boxes where the user can put 1. Orientation 2. 1st Color 3. 2nd Color
我正在 Firefox 中通过 JavaScript 编辑 CSS 渐变。我有输入框，用户可以在其中放置 1. Orientation 2. 1st Color 3. 2nd Color
Here is the html
这是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>
So to recap, the user will specify their 3 values, which get passed to the function 'renderButton();'. What line can I use to change the 3 values of the CSS3 gradient so that the user can make their own custom gradient boxes? I'm assuming its only a line or two that I will need.
因此，回顾一下，用户将指定他们的 3 个值，这些值将传递给函数“renderButton();”。我可以使用哪一行来更改 CSS3 渐变的 3 个值，以便用户可以制作自己的自定义渐变框？我假设我只需要一两行。
P.S. I realize this example only works in Firefox. I just want to get the concept down before working on different browsers.
PS 我意识到这个例子只适用于 Firefox。我只想在使用不同的浏览器之前先了解这个概念。
回答by Matt Coughlin
Start with something like the following:
从以下内容开始：
var dom = document.getElementById('mainHolder');
dom.style.backgroundImage = '-moz-linear-gradient('
+ orientation + ', ' + colorOne + ', ' + colorTwo + ')';
If you need to support more browsers than Firefox, this will need to be done in combination with either browser-sniffing or some Modernizr-like feature detection.
如果您需要支持比 Firefox 多的浏览器，则需要结合浏览器嗅探或一些类似 Modernizr 的功能检测来完成。
Below is an example of how this can be done, using feature-detection similar to Modernizr (tested in Firefox, Chrome, Safari, Opera).
下面是一个如何做到这一点的例子，使用类似于 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 + ')';
