0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

(1冊ですべて身につく)カラーピッカーを作成する 背景色も同期させる

Posted at

お疲れ様です。

これまで使っていたノートPC不具合のため、新しいPCへ移行作業などしておりましたら遅くなりました。

今日は前回の続きで、背景も選択された色になるようにコードを足しました。
1301.png

1302.png

追加したのは document.body.style.backgroundColor の部分です。
body.style.cssプロパティ名 で、cssプロパティをJSから直接設定することができるようになります。
プロパティ名を記述する際、ハイフンは使えませんので、キャメルケースで記述する必要があります。

1303.png
1304.png
ここまでいかずとも完成でしたが、参考書にある通り進めますと、画像のように#fffが選択された場合に(white)と表示されるようif文を追加するというものです。(20行目)

if文を追加し、無事色の名前を表示できたところでカラーピッカーの作成は終了といたします。
#fffだけでなく、#000(黒)も表示させたい場合はさらに else if を追加すると黒が選ばれたときにも(black)と表示できるようになります。


これでカラーピッカーの作成は終了です。
自己都合のため数日に渡ってしまいましたが、まとまった時間がとれれば1日で確実に作成できる内容だと思いました。
また使用したコードも最近勉強していたDOM操作や、if文が主だったのでいい復習になりました。
明日からはイベント操作について勉強し、参考書にあるローディング画面なるものを作っていこうと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?