入力された値とクリックイベントを利用して、動的にCSS を変更してみましょう。

使用するファイル

配布

• kadai02.html
• kadai02.css
• common.css
• common.js

作成

• kadai02.js

ダウンロード

kadai02.zip

仕様

テキストボックスにCSSプロパティに使用する値を入力し、ボタンをクリックしたらCSSを動的に変更されるようにしましょう。 各ボックスで変更する対象と箇所は、ボックス内の説明で指定されていますので、対象のCSSプロパティをJavaScriptで変更するようにしましょう。

<aside> 💡 各HTMLタグには、既にID名やクラス名が設定されています。 JavaScriptのために、新たにID名やクラス名を追加する必要はありません。 HTMLタグの構造や状態を把握して、JavaScriptを組んでいきましょう。

</aside>

色の変更は、色名（redやtomatoなど）でもカラーコードやRGB指定でも対応するようにするため、カラーコードを入力する際は、「 # 」付き（16進数表記）で入力しましょう。