[編集モード] なでしこさんで色見本

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

「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イベント発火した時には
    対象から色更新。
  ここまで。
ここまで。

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] なでしこさんで色見本

素材のアップロード