如何在 JavaScript 中编写 RGB 颜色值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2173229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I write a RGB color value in JavaScript?
提问by Ashley
I am trying to change the color of the function swapFE() below and I can't figure out how to write it. I was told to change the color of the phrase node to the color value (155, 102, 102). I tried to do that as you can see at the end of the function see- parent.childNodes[1].style.color= (155, 102, 102); but it just comes out a dark navy blue. It's supposed to be a brownish red. I have no idea what I'm doing wrong. How can I fix this to get the correct RGB color? I know I have the rest right it's just figuring out how to write the color and the value that's giving me problems. Thanks!
我正在尝试更改下面函数 swapFE() 的颜色，但我不知道如何编写它。我被告知将短语节点的颜色更改为颜色值 (155, 102, 102)。我尝试这样做，正如您在函数 see-parent.childNodes[1].style.color= (155, 102, 102); 的末尾所看到的那样。但它只是一种深海军蓝。应该是棕红色。我不知道我做错了什么。如何解决此问题以获得正确的 RGB 颜色？我知道我有其余的权利，它只是弄清楚如何编写颜色和给我带来问题的值。谢谢！
//this function changes the French phrase to an English phrase.
function swapFE(e) {
var phrase = e.srcElement;
//phrase.innerText = english[phrase.id];
var parent = phrase.parentNode;
//childNodes[0] is the number of the phrase +1
var idnum = parent.childNodes[0];
//parseInt takes a textstring and extracts it to make a number. Then you will subtract 1 from the number.
var phrasenum = parseInt(idnum.innerHTML)-1;
phrase.innerText = english[phrasenum];
parent.childNodes[1].style.fontStyle= "normal";
parent.childNodes[1].style.color= (155, 102, 102);
}
function swapEF(e) {
var phrase = e.srcElement;
//phrase.innerText = english[phrase.id];
var parent = phrase.parentNode;
var idnum = parent.childNodes[0];
var phrasenum = parseInt(idnum.innerHTML)-1;
phrase.innerText = french[phrasenum];
parent.childNodes[1].style.fontStyle= "italic";
parent.childNodes[1].style.color= "black";
回答by Marius
try:
尝试：
parent.childNodes[1].style.color = "rgb(155, 102, 102)";
Or
或者
parent.childNodes[1].style.color = "#"+(155).toString(16)+(102).toString(16)+(102).toString(16);
回答by curran
Here's a simple function that creates a CSS color string from RGB values ranging from 0 to 255:
这是一个简单的函数，它从 0 到 255 的 RGB 值创建一个 CSS 颜色字符串：
function rgb(r, g, b){
return "rgb("+r+","+g+","+b+")";
}
Alternatively (to create fewer string objects), you could use array join():
或者（要创建更少的字符串对象），您可以使用数组 join()：
function rgb(r, g, b){
return ["rgb(",r,",",g,",",b,")"].join("");
}
The above functions will only work properly if (r, g, and b) are integers between 0 and 255. If they are not integers, the color system will treat them as in the range from 0 to 1. To account for non-integer numbers, use the following:
上述函数只有在 (r, g, and b) 是 0 到 255 之间的整数时才能正常工作。如果它们不是整数，颜色系统会将它们视为 0 到 1 之间的范围。为了说明非整数数字，请使用以下内容：
function rgb(r, g, b){
r = Math.floor(r);
g = Math.floor(g);
b = Math.floor(b);
return ["rgb(",r,",",g,",",b,")"].join("");
}
You could also use ES6 language features:
您还可以使用 ES6 语言功能：
const rgb = (r, g, b) =>
`rgb(${Math.floor(r)},${Math.floor(g)},${Math.floor(b)})`;
回答by asd
this is better function
这是更好的功能
function RGB2HTML(red, green, blue)
{
var decColor =0x1000000+ blue + 0x100 * green + 0x10000 *red ;
return '#'+decColor.toString(16).substr(1);
}
回答by Ein2012
I am showing with an example of adding random color. You can write this way
我展示了一个添加随机颜色的例子。你可以这样写
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
var col = "rgb(" + r + "," + g + "," + b + ")";
parent.childNodes[1].style.color = col;
The property is expected as a string
该属性应为字符串
回答by Scott Weaver
ES6 (template literal) helper functions:
ES6（模板文字）辅助函数：
function rgba(r, g, b, a=1){
return `rgba(${r}, ${g}, ${b}, ${a})`
}
function rgb(r, g, b){
return `rgb(${r}, ${g}, ${b})`
}
回答by Bandit
dec2hex = function (d) {
if (d > 15)
{ return d.toString(16) } else
{ return "0" + d.toString(16) }
}
rgb = function (r, g, b) { return "#" + dec2hex(r) + dec2hex(g) + dec2hex(b) };
and:
和：
parent.childNodes[1].style.color = rgb(155, 102, 102);
