使用Javascript更改背景渐变颜色

Question

我正在尝试更改背景渐变颜色。 这是我的代码。 浏览器反映出getColor是不确定的。color1，color2和color 3是我从用户那里获得的输入。 它们可以工作，但是我仍然无法更改背景渐变颜色。

<script>
    function getColor(){
        var color1 = document.getElementById('color1').value;
        var color2 = document.getElementById('color2').value;
        var color3 = document.getElementById('color3').value;
        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] + 'liner-gradient(#000000, #ffffff)';

                    // Detect if the style was successfully set
                    if (dom.style.background)
                    {
                        rtrnVal = prefixes[i];
                    }
                }

                dom = null;
                delete dom;

                return rtrnVal; 

            }
        document.getElementsByTagName("body")[0].style.background = getCssValuePrefix() + 'linear-gradient('+ '38deg' + ', ' + color1 + ', '+ color2  + ',' + color3 +')';

    </script>

在html中，我有一个按钮，如下所示：

<button onclick="getColor">Change Background Color</button>

Answer 1

浏览器反映getColor未定义

可能的问题是您的脚本未放在window.onload 。 因此，HTML onclick处理程序会在加载之前尝试getColor 。

注意：您的代码中有liner-gradient 。 这是一个错字。