微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – 为什么backgroundColor = rgb(a,b,c)工作?

<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>

为什么背景颜色根据RGB值而不同?我做错了什么?

解决方法

您需要使用引号:
document.body.style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')';

JS Fiddle demo.

要么:

document.body.style.backgroundColor = 'rgb(' + [a,c].join(',') + ')';

JS Fiddle demo.

不引用JavaScript将变量作为参数a,b和c传递给一个名为rgb()的未定义函数.当您设置CSS属性时,您需要传递一个字符串,因此需要引用.

哦,你也使用parseInt(),它不需要传入一个基数,但是如果你这样做(基数是预期的数字基数),它会更好(并且更容易避免问题)):

var a = parseInt(prompt("Enter R"),10) || 255,b = parseInt(prompt("Enter G"),c = parseInt(prompt("Enter B"),10) || 255;

JS Fiddle demo(在演示中,我使用105,所以很明显,如果使用取消按钮,则使用认值).

如果有人在提示符下点击“取消”,您可能需要提供一个认参数,以确保实际的颜色值被传递,否则,否则我认为评估为false(假设你更喜欢255,但明显调整味道).

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

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

JS Fiddle demo

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

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

JS Fiddle demo

参考文献:

> || (logical OR) operator.
> Array.join().
> Element.style.
> parseInt().

原文地址:https://www.jb51.cc/js/153423.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐