JavaScriptからCSSのクラスを操作する方法について見ていきます。
- classList
- コメントの書き方
classList
・javascriptでCSSのクラスを操作する方法について学んで行きます。
・前回はjavascriptの中でスタイルを書いていく方法について学びましたがスタイルに関する処理はCSSで書いていったほうが後々わかりやすいですしコード自治もすっきりするので今回はcssで書いた内容をjavascriptで呼び出した行きましょう。
・まずCSSに新しくcircleというクラスでスタイルを書いていきます。今回は赤い丸にしたいのでbackgroundをredにしてborder-radiusを50％にして変化後のスタイルをまとめておきます。
・CSSで書いたクラスをjavascriptで読み込んで行きたいので.addEventListenerの中でまずはid属性を呼び出すためにdocument.getElementById('target’)としてあげて続けて.classList.add('circle’);としてあげましょう。
・意味としてはclass属性のcircleを取得してくださいという感じになります。
コメントの書き方
・HTMLやCSSと同様にコメントとしてコードを残しておくことができます。これは処理には反映されずコードだけが残るので共同開発や個人的に後で見返したときにわかりやすいようにしておくことができます。
・javascriptでは文頭に//とするとその行すべてが実行時無視されるようになります。
・こういった反映されない文字をコメントといいますがVSコードではこの機能をよく使うのでショートカットキーが用意されています。
・macOSの場合はcommand /でカーソルのおいてある行がコメントになります。