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に変換する処理を小分けして書くと以下のようになります。
※コメントアウトは、その時点でのcolorに代入されている文字列です
また、「rgba」に書き換えず「rgb」のまま透過度の引数を追加してHTML要素にセットした場合、自動で「rgba」に変換してくれます。
ですので、単純に末尾の「)」を「, 透過度)」に書き換えるだけでも問題ありません。
※文字列ではrgbのままですが、この文字列を利用してHTML要素の色を書き換えた場合はrgbaとして処理されます。
HTML要素から背景色を取得して、透過度を追加してHTML要素に適用する場合は以下のようなコードになります。
ディスカッション
コメント一覧
まだ、コメントがありません