使用 JavaScript 編輯 CSS 漸變

Question

我正在 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。 我只想在使用不同的瀏覽器之前先了解這個概念。

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

使用 JavaScript 編輯 CSS 漸變

問題描述

1 個解決方案

解決方案1
32 已采納 2013-02-25 16:16:01

使用 JavaScript 編輯 CSS 漸變

問題描述

1 個解決方案

解決方案1 32 已采納 2013-02-25 16:16:01

解決方案1
32 已采納 2013-02-25 16:16:01