web-dev-qa-db-ja.com

JavaScriptでRGBカラー値を書き込むにはどうすればよいですか？

以下の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";
javascriptfunctioncoding-stylecolorsrgb
38
Ashley

試してください：

parent.childNodes[1].style.color = "rgb(155, 102, 102)";

または

parent.childNodes[1].style.color = "#"+(155).toString(16)+(102).toString(16)+(102).toString(16);
59
Marius

0〜255の範囲のRGB値からCSSカラー文字列を作成する簡単な関数を次に示します。

function rgb(r, g, b){
  return "rgb("+r+","+g+","+b+")";
}

代わりに（より少ない文字列オブジェクトを作成するために）、配列join（）を使用できます：

function rgb(r, g, b){
  return ["rgb(",r,",",g,",",b,")"].join("");
}

上記の関数は、（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("");
}
13
curran

これはより良い機能です

function RGB2HTML(red, green, blue)
{
    var decColor =0x1000000+ blue + 0x100 * green + 0x10000 *red ;
    return '#'+decColor.toString(16).substr(1);
}
9
asd

ランダムな色を追加する例を示しています。このように書くことができます

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;

プロパティは文字列として期待されます

4
Ein2012

ES6（テンプレートリテラル）ヘルパー関数：

function rgba(r, g, b, a=1){
    return `rgba(${r}, ${g}, ${b}, ${a})`
}
function rgb(r, g, b){
    return `rgb(${r}, ${g}, ${b})`
}
0
Scott Weaver