JavaScriptを使用して16進値をRGBA値に変換するにはどうすればよいですか?

Web ページをデザインするとき、Web ページをより魅力的で魅力的なものにするために色を使用します。通常、色を表すには 16 進コードを使用しますが、場合によっては色に透明度を追加する必要があり、これは RGBA 値によって実現できます。

16 進数のカラー値は #RRGGBBAA で表され、RGBA カラー値は rgba(赤、緑、青、アルファ) で表されます。 。 RGBA と 16 進値の例をいくつか示します -

リーリー

この記事では、JavaScript を使用して Hex を RGBA に変換するさまざまな方法について説明します。

• parseInt メソッドと String.substring メソッドを使用する

• 配列の構造化と正規表現の使用

ParseInt メソッドと String.substring メソッドを使用する

parseInt() 関数は、数値を表す文字列と基数を表す数値の 2 つのパラメーターを受け入れます。次に、文字列を指定された基数の整数に変換し、結果を返します。

String.substring メソッドは、開始位置と終了位置を取得して文字列の一部を抽出するために使用されます。

HEX を RGBA に変換するには、次の手順を使用します。

• # のままにして、String.substring メソッドを使用して、16 進文字列の 2 文字のペアを 1 つずつ抽出します。

• 抽出後、parseInt メソッドを使用して各ペアを整数に変換します。これらのペアは 16 進コードであることがわかっているため、parseInt の 2 番目の引数に 16 を渡す必要があります。

• 16 進コードの各ペアを整数に変換した後、それらを RGBA 形式に連結します。

＃＃＃例＃＃＃

この例では、16 進コードを RGBA に変換します。

リーリー

Array.map() メソッドと String.match() メソッドを使用する

Javascript 配列 map() メソッドは、配列内の各要素に対して指定された関数を呼び出した結果を含む新しい配列を作成します。

String.match メソッドは、文字列を正規表現と照合するときに一致を取得するために使用されます。

HEX を RGBA に変換するには、次の手順を使用します。

/
• \w\w/g

  正規表現と String.match メソッドを使用して、16 進文字列の 2 つの連続する英数字のすべてのシーケンスと一致します。

配列内に 3 組の英数字を取得し、Array.map メソッドと parseInt メソッドを使用してこれらの文字を整数に変換します。

• ＃＃＃例＃＃＃
この例では、16 進コードを RGBA に変換します。

ああああ

以上がJavaScriptを使用して16進値をRGBA値に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。