JS Method

JavaScriptを使ってCSSの操作

下にあるテキストボックスとボタンを使って、動的に指定されたCSSプロパティを操作してみましょう。

背景色を設定する

ID名[ box1 ]の背景色を下のテキストボックスに入力したカラーコードに変更してみましょう。
【ヒント】CSSで背景色を設定するプロパティはbackground-colorでした。

文字色を設定する

ID名[ box2-text ]の文字色を下のテキストボックスに入力したカラーコードに変更してみましょう。

文字のサイズを設定する

ID名[ box3-text ]の文字サイズを下のテキストボックスに入力した大きさに変更してみましょう。
【ヒント】CSSで文字サイズを設定すプロパティはfont-sizeでした。
【ヒント】単位はpx, em, %, remなどがあります。

罫線を設定する

ID名[ box4 ]の罫線を下のテキストボックスに入力した内容に変更してみましょう。