Question

尝试使用slider赋予颜色值。这将是四个滑块，它们是红色，绿色，蓝色，alpha。一切似乎都很好，但它不会改变具有id＆＃34; mydiv＆＃34;的div的颜色。可能是什么问题？

<html>
    <head>
        <script>
            var red=0;
            var green=0;
            var blue=0;
            var alpha=0;
            function changered(val){
                red=val;
                var m=document.getElementById("mydiv");
                m.style.backgroundColor='rgba ('+red+','+green+','+blue+','+alpha+')';
            }
            function changegreen(val){
                green=val;
                var m=document.getElementById("mydiv");
                m.style.backgroundColor='rgba ('+red+','+green+','+blue+','+alpha+')';
            }
            function changeblue(val){
                blue=val;
                var m=document.getElementById("mydiv");
                m.style.backgroundColor='rgba ('+red+','+green+','+blue+','+alpha+')';
            }
            function changealpha(val){
                alpha=val;
                var m=document.getElementById("mydiv");
                m.style.backgroundColor='rgba ('+red+','+green+','+blue+','+alpha+')';
            }
        </script>
    </head>
    <body>

        <div id="mydiv"  style="border:1px solid black;width:200px;height:100px;"></div></br>
        <div style="background-color:black;color:white;display:inline-block;background-color:red;">
            red:<input type="range" min="0" max="255"  value="0" step="1" onChange="changered(this.value);"></br>
            green:<input type="range" min="0" max="255"  value="0" step="1" onChange="changegreen(this.value);"></br>
            blue:<input type="range" min="0" max="255"  value="0" step="1" onChange="changeblue(this.value);"></br>
            alpha:<input type="range" min="0" max="255"  value="0" step="1" onChange="changealpha(this.value);"></br>
        </div>
    </body>
</html>

Answer 1

消除rgba和(

之间的空格

错误代码

m.style.backgroundColor='rgba ('+ //...

正确的代码

m.style.backgroundColor='rgba('+ //...

并在将Alpha值更改为255后再次检查

Answer 2

您的代码出了问题：

1 - Alpha值需要0到1之间的小数，因此正确的alpha输入应为

<input type="range" min="0" max="1"  value="0" step="0.01" onChange="changealpha(this.value);">

2 - 你的rgba用法中有一个额外的空间，如：rgba (。但a和(之间的空格不应该存在：rgba(...

3-这些只是建议：

不要在每个函数中使用var m=document.getElementById("mydiv");，而是在函数作为全局函数之前声明m var。

不要单独编写你的函数，因为它们所做的一切最终都是一样的。您的功能可以合并为一个这样的

function changeColor(val,color){
  switch (color) {
    case 0: red = val; break;
    case 1: green = val; break;
    case 2: blue = val; break;
    case 3: alpha = val; break;
  }
  m.style.backgroundColor='rgba('+red+','+green+','+blue+','+alpha+')';
}

当然要使用此功能，您需要从

等输入中调用它

changeColor(this.value, 0);

<强> FIDDLE

Answer 3

更新：

你的alpha是0.默认情况下将它设为1以消除混淆：

var alpha = 1;

，并且函数'rgba（'。

）也不应该有空格

请参阅以下工作代码：

JSFiddle

使用输入范围元素更改颜色

3 个答案: