javascript | rgbをrgbaに変換する

JavaScript,javascript DOM操作

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;