使用JavaScript编辑CSS渐变_Javascript_Css_Firefox_Browser_Linear Gradients

使用JavaScript编辑CSS渐变

javascript css firefox browser

使用JavaScript编辑CSS渐变,javascript,css,firefox,browser,linear-gradients,Javascript,Css,Firefox,Browser,Linear Gradients,我正在通过Firefox中的JavaScript编辑CSS渐变。我有输入框，用户可以将 1.方向 2.第一色 3.第二种颜色这是html <html> <head> <title>Linear Gradient Control</title> <script> function renderButton(){ var orientation =

我正在通过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>


线性梯度控制
函数renderButton（）{
var orientation=document.getElementById（“firstValue”）.value；
var colorOne=document.getElementById（“firstColor”）.value；
var colorTwo=document.getElementById（“secondColor”）.value；
//警惕（定向）；
//警报（彩色）；
//警觉(二);；
};
#主要持有人
{
宽度：500px；
背景：-莫兹线性梯度（左、绿、红）；
}
渐变编辑器
方向

第一种颜色

第二种颜色

伦德尔
内容

总而言之，用户将指定它们的3个值，这些值将传递给函数“renderButton（）；”。我可以使用哪一行来更改CSS3渐变的3个值，以便用户可以创建自己的自定义渐变框？我想我只需要一两行

另外，我意识到这个例子只适用于Firefox。在使用不同的浏览器之前，我只想了解一下这个概念

从以下内容开始：

var dom = document.getElementById('mainHolder');
dom.style.backgroundImage = '-moz-linear-gradient('
        + orientation + ', ' + colorOne + ', ' + colorTwo + ')';

如果您需要支持比Firefox更多的浏览器，则需要结合浏览器嗅探或类似于Modernizer的功能检测来完成

下面的例子说明了如何使用类似于Modernizr（在Firefox、Chrome、Safari和Opera中测试）的功能检测来实现这一点

//检测用于指定CSS值的浏览器前缀
//（例如，背景图像：-moz线性梯度（…）；
//背景图像：-o-线性梯度（…）；等）。
//
函数getCssValuePrefix（）
{
var rtrnVal=''；//默认为标准语法
var前缀=['-o-'、'-ms-'、'-moz-'、'-webkit-']；
//创建用于测试的临时DOM对象
var dom=document.createElement（'div'）；
for（var i=0；i

@user2070478:我添加了一个如何支持不同浏览器的示例。请注意，IE9和更早版本不支持渐变。另外，对于早期版本的webkit，还有一种不同的语法，这并不包括在内。你两天前回答了我的问题，但我仍然会对这个答案进行投票。非常感谢。本机语法永远不会通过此测试。我建议将变量设置为“返回值”，并将其设置为第一个“successfully set”前缀，而不是以这样的方式返回它：您可以清理创建的div并销毁它。将返回变量初始化为

”

，以便在默认情况下使用本机语法。最初，这也会设置无效的CSS属性。我的编辑应该用尽可能少的代码修改来纠正这些错误。棒极了！我没有想过要这样处理。是的，我仍然不能让它工作，但我试图修复它。不过，这仍然是一次很酷的尝试。

// 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 + ')';