如何在JavaScript中编写RGB颜色值?
我试图更改下面函数swapFE()的颜色,但我不知道如何编写它。我被告知将短语节点的颜色更改为颜色值(155102102)。正如您在函数see-parent.childNodes[1].style.color=(155102102)末尾看到的那样,我尝试了这样做;但它只是一个深海军蓝。应该是棕红色的。我不知道我做错了什么。如何修复此问题以获得正确的RGB颜色?我知道我有其他的权利,只是想知道如何写颜色和值,这给我带来了问题。谢谢如何在JavaScript中编写RGB颜色值?,javascript,function,coding-style,colors,rgb,Javascript,Function,Coding Style,Colors,Rgb,我试图更改下面函数swapFE()的颜色,但我不知道如何编写它。我被告知将短语节点的颜色更改为颜色值(155102102)。正如您在函数see-parent.childNodes[1].style.color=(155102102)末尾看到的那样,我尝试了这样做;但它只是一个深海军蓝。应该是棕红色的。我不知道我做错了什么。如何修复此问题以获得正确的RGB颜色?我知道我有其他的权利,只是想知道如何写颜色和值,这给我带来了问题。谢谢 //this function changes the Frenc
//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";
尝试:
或
这是更好的功能
function RGB2HTML(red, green, blue)
{
var decColor =0x1000000+ blue + 0x100 * green + 0x10000 *red ;
return '#'+decColor.toString(16).substr(1);
}
下面是一个简单的函数,用于从0到255的RGB值创建CSS颜色字符串:
function rgb(r, g, b){
return "rgb("+r+","+g+","+b+")";
}
或者(要创建更少的字符串对象),可以使用数组连接():
只有当(r、g和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("");
}
您还可以使用ES6语言功能:
const rgb = (r, g, b) =>
`rgb(${Math.floor(r)},${Math.floor(g)},${Math.floor(b)})`;
我用一个添加随机颜色的示例演示。你可以这样写
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;
属性应为字符串
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) };
以及:
ES6(模板文字)辅助函数:
function rgba(r, g, b, a=1){
return `rgba(${r}, ${g}, ${b}, ${a})`
}
function rgb(r, g, b){
return `rgb(${r}, ${g}, ${b})`
}
与asd的答案类似,但更快更简单(使用位运算):
功能rgb(红、绿、蓝){
return(red&0xF0?“#?”:“#0”)+(red parent.childNodes[1]。style.color=“rgb(155102102)”;…有效!非常感谢!警告!如果其中一种颜色小于16,则第二种解决方案无效。纯红色示例:“#”+(255)。toString(16)+(0)。toString(16)+(0)。toString(16)+(0)。toString(16)
给出的#FF00
颜色代码不正确。请使用padStart(2,'0')
。我已更改了G和B值,以检查结果的原因:colorLcl=#5c.db7bc07a5dc86d.eb59d144e6f79.cdf6b2b95。您的第二个建议有问题吗
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;
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) };
parent.childNodes[1].style.color = rgb(155, 102, 102);
function rgba(r, g, b, a=1){
return `rgba(${r}, ${g}, ${b}, ${a})`
}
function rgb(r, g, b){
return `rgb(${r}, ${g}, ${b})`
}
function rgb(red, green, blue) {
return (red & 0xF0 ? '#' : '#0') + (red << 16 | green << 8 | blue).toString(16)
}