使用 JavaScript 编辑 CSS 渐变

IT技术 javascript css firefox browser linear-gradients
2021-03-01 16:28:35

我正在 Firefox 中通过 JavaScript 编辑 CSS 渐变。我有输入框，用户可以在其中放置 1. Orientation 2. 1st Color 3. 2nd Color

这是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。我只想在使用不同的浏览器之前先了解这个概念。

1个回答

从以下内容开始：

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 + ')';
对于本机语法，此测试永远不会通过。我建议将变量设置为“返回值”并将其设置为第一个“成功设置”前缀，而不是通过这种方式返回它，您可以清理您创建的 div 并销毁它。将返回变量初始化为，""以便默认使用本机语法。
2021-04-19 16:28:35
是的，我仍然无法让它工作，但我试图修复它。尽管如此，仍然是一个很酷的尝试。
2021-04-26 16:28:35
你两天前回答了我的问题，但我仍然会赞成这个答案。谢谢！
2021-04-30 16:28:35
@user2070478：我添加了一个如何支持不同浏览器的示例。请注意，IE9 及更早版本不支持渐变。此外，对于早期版本的 webkit 有不同的语法，这不包括在内。
2021-05-05 16:28:35
最初，这也会设置无效的 CSS 属性。我的编辑应该以尽可能少的代码更改来纠正这些错误。很棒的帖子！我没有想过这样处理。
2021-05-06 16:28:35
其它你可能感兴趣的问题
上一篇javascript 类型的 HTML 元素 下一篇HTML/JavaScript：提交时的简单表单验证