JavaScript | rgbをrgbaに変換する
javascriptで取得したrgbに透過度を加えてrgbaに変換して利用したい場合の簡単なサンプルコードです。
rgbをrgbaに変換する
javascriptの「style.backgroundColor」などで色を取得した場合、rgbまたはrgbaを文字列として取得します。
例えば「＃FFF」や「white」または「rgb(rgb(255, 255, 255)」に色設定されている要素から取得した場合は「’rgb(255, 255, 255)’」を取得します。
JavaScriptを利用して、この値にrgbaで透過度を与えたい場合、単純にテキストを書き換えるたけで問題ありません。
透過度を0.5に指定したrgbaに変換する処理を小分けして書くと以下のようになります。
let color = 'rgb(255, 255, 255)';
color = color.replace(/rgb|\(|\)/g, '');
//255, 255, 255
color = 'rgba(' + color + ', 0.5)';
//rgba(255, 255, 255, 0.5)※コメントアウトは、その時点でのcolorに代入されている文字列です
また、「rgba」に書き換えず「rgb」のまま透過度の引数を追加してHTML要素にセットした場合、自動で「rgba」に変換してくれます。
ですので、単純に末尾の「)」を「, 透過度)」に書き換えるだけでも問題ありません。
let color = 'rgb(255, 255, 255)';
color = color.replace(')', ', 0.5)');
//rgb(255, 255, 255, 0.5)※文字列ではrgbのままですが、この文字列を利用してHTML要素の色を書き換えた場合はrgbaとして処理されます。
HTML要素から背景色を取得して、透過度を追加してHTML要素に適用する場合は以下のようなコードになります。
//取得するHTML要素
const target = document.querySelector('#target');
//背景色を取得して透過度を追加
let color = target.style.backgroundColor.replace(')', ', 0.5)');
//HTML要素の背景色を変更
target.style.backgroundColor = color;