【Web】HTMLのclassをJavaScriptで動的に変更する (Web勉強記 4日目)

投稿日:2019年8月6日
最終更新日:2019年8月6日

classをJavaScriptから動的に変えたい

現在作成中のウェブおみくじで、おみくじの結果によってテキストの色を変えたいと思っている。いろいろ考えた結果、HTMLのclassをJavaScriptから変更すれば良い感じでできそうだったので、やってみた。

 

getElementByIdを使ってやってみる

まず、HTMLを以下のように変更した。

各おみくじの結果によりgood、normal、badをresultClassという変数に代入し、最後に

document.getElementById(“result”).className = resultClass;

でClassを変更している。また、CSSを以下のように変更した。

good、normal、badにより、おみくじ結果のテキストの色が青、緑、赤に変更されるようにしている。これで、おみくじの結果によってテキストの色を変更することができた。(あまりスマートじゃない気はするが…。)

 

参考書籍

今はこの本を読みながらHTML、CSS、JavaScriptの勉強してます。書籍のコードをなぞるだけだと面白味が無いしブログにものっけられないので、本で勉強したことをもとに何かつくり、コードを公開していくスタイルで日記を書いてます。最終的にはWebブラウザ上で動くゲームをつくって公開したい。

ゲームを作りながら楽しく学べるHTML5 CSS JavaScriptプログラミング[改訂版] (Future Coders(NextPublishing))

 

2+

投稿者: wakky

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください