为什么backgroundColor = rgb(a,b,c)不起作用?

Dan*_*tor 17 html javascript

<html>
    <head>
        <title> Colors </title>
    </head>

    <body>
    <script type="text/javascript">
        var a = parseInt(prompt("Enter R"));
        var b = parseInt(prompt("Enter G"));
        var c = parseInt(prompt("Enter B"));
        document.body.style.backgroundColor=rgb(a,b,c);
    </script>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

为什么背景颜色不会根据RGB值变化?我做错了什么?

Dav*_*mas 43

你需要使用引号:

document.body.style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')';
Run Code Online (Sandbox Code Playgroud)

JS小提琴演示.

要么:

document.body.style.backgroundColor = 'rgb(' + [a,b,c].join(',') + ')';
Run Code Online (Sandbox Code Playgroud)

JS小提琴演示.

未加引号的JavaScript是传递变量,作为参数,a,bc以所谓的未定义功能rgb().当您设置CSS属性时,您需要传递一个字符串,因此需要引用.

哦,还有你使用parseInt()它不要求在传递一个基数,但它是更好的(和更容易避免的问题),如果你这样做(的基数是预期数量基):

var a = parseInt(prompt("Enter R"), 10) || 255,
    b = parseInt(prompt("Enter G"), 10) || 255,
    c = parseInt(prompt("Enter B"), 10) || 255;
Run Code Online (Sandbox Code Playgroud)

JS小提琴演示(在我使用的演示中105,很明显,如果使用cancel按钮,则使用默认值).

如果有人在提示符上点击"取消",你可能想提供一个默认参数来确保传递实际的颜色值,cancel否则,我认为,评估为false(我假设你更喜欢255,但显然适应味道).

当然,您也可以简单地定义一个函数:

function rgb(r,g,b) {
    return 'rgb(' + [(r||0),(g||0),(b||0)].join(',') + ')';
}
  var a = parseInt(prompt("Enter R"), 10),
      b = parseInt(prompt("Enter G"), 10),
      c = parseInt(prompt("Enter B"), 10);
  document.body.style.backgroundColor = rgb(a,b,c);
Run Code Online (Sandbox Code Playgroud)

JS小提琴演示

这种方法具有允许使用自定义默认值的(可能是似是而非的)好处:

function rgb(r,g,b, def) {
def = parseInt(def, 10) || 0;
    return 'rgb(' + [(r||def),(g||def),(b||def)].join(',') + ')';
}
var a = parseInt(prompt("Enter R"), 10),
    b = parseInt(prompt("Enter G"), 10),
    c = parseInt(prompt("Enter B"), 10);
document.body.style.backgroundColor = rgb(a,b,c,40);
Run Code Online (Sandbox Code Playgroud)

JS小提琴演示

参考文献: