なでしこさんで色見本 📖

赤・緑・青のそれぞれの要素の値を指定して、それに対応する色を表示する。

プログラム: (→大)
「DIV」のDOM部品作成してDOM親要素設定。 それに{ display: "grid", gridTemplateColumns: "auto", width: "100%", maxWidth: "40em", }をDOMスタイル一括設定。 色表示は空のラベル作成。 それに{ border: "1px solid black", boxSizing: "border-box", height: "3em", backgroundColor: "#ffffff", marginBottom: "1em", }をDOMスタイル一括設定。 「DIV」のDOM部品作成してDOM親要素設定。 それに{ display: "grid", gridTemplateColumns: "auto 1fr 6em", alignItems: "center", }をDOMスタイル一括設定。 色情報は{赤:255, 緑:255, 青:255}。 ●(要素から)色更新とは 定数の要素情報は要素のDOMポケット取得。 定数の要素値は要素のDOMテキスト取得して整数変換。 もし、論理NOT(NAN判定(要素値))ならば 定数の補正後値は要素値の0から255までのCLAMP。 定数のパートナーは要素情報$パートナーIDのDOM要素ID取得。 パートナーに補正後値をDOMテキスト設定。 色情報[要素情報$要素名]は補正後値。 色表示の「背景色」にRGB(色情報$赤, 色情報$緑, 色情報$青)をDOMスタイル設定。 ここまで。 ここまで。 色情報の辞書キー列挙して反復 対象のラベル作成。 要素バーは[0,255,255]の値指定バー作成。 要素欄は「255」のエディタ作成。 それの「type」に「number」をDOM属性設定。 それの「min」に「0」をDOM属性設定。 それの「max」に「255」をDOM属性設定。 要素バーIDは要素バーの「id」をDOM属性取得。 要素欄IDは要素欄の「id」をDOM属性取得。 要素バーに{ 要素名: 対象, パートナーID: 要素欄ID, }をDOMポケット設定。 要素欄に{ 要素名: 対象, パートナーID: 要素バーID, }をDOMポケット設定。 要素バーの「input」がDOMイベント発火した時には 対象から色更新。 ここまで。 要素欄の「input」がDOMイベント発火した時には 対象から色更新。 ここまで。 ここまで。