【JavaScript】スタイルを変えたい！JavaScriptからスタイルを付ける方法

こんにちは朱夏です。

今回はJavaScriptを使ってスタイルを制御する方法を解説していきます。

朱夏

JavaScriptからスタイルをいじれたら色々できそう。

どうやってやるんだろう？

ページをスクロールするとフェードインしてくるような視覚効果を持ったページなどは、クリックやスクロールなどをトリガーとして、JavaScriptで後からスタイルを変化させています。

今回は、以下の2つの方法を解説していきたいと思います。

• スタイルを直接付与していく方法
• classを追加する方法

それではいきましょう。

スタイルを直接付与

指定した要素に対して直接スタイルを付与していく方法です。

コードはこんな感じ。

See the Pen
RwPBrrP by 朱夏 (@syunatsu1)
on CodePen.

.style

ポイントとなるのは「.style」の部分です。

この後ろに続けて設定したいスタイルを書いていきます。
今回の場合、1つ目で文字の色を白に、2つ目で背景の色を緑に変更しています。

この方法でスタイルを指定する場合に一つ注意しなければいけない事があります。
それは、「CSSとスタイルの記述方法が違う」ということです。

JavaScriptでのスタイルの記述方法については、以下の対応表を見つけましたので参考にしてください。

MDN Web Docs

40 Users

111 Pockets

CSS Properties Reference

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference

The following is a basic list of the most common CSS properties with the equivalent of the DOM notation which is usually accessed from JavaScript:

classを追加

スタイルを付与したい要素に対してclassを追加する事で、そのclassにあらかじめ設定していたスタイルを適用する方法です。
私が使ってみた所感では、スタイルをたくさん付与したい場合は、こちらの方が使いやすいと思います。

コードはこんな感じになります。

See the Pen
wvaxGqY by 朱夏 (@syunatsu1)
on CodePen.

1つ目のスタイルを直接付与する方法と違い、CSSのコードで直接スタイルを書けるので、こちらの方が使いやすいかもしれませんね。

あとがき

というわけで、JavaScriptでスタイルを付ける方法について書いてみました。

今回のまとめはこんな感じ。

• スタイルを直接付与する
• 直接付与する場合はコードが違う
• classを付与してCSSでスタイルを充てる

JavaScriptで用意したスタイル付与の処理を、スクロールで画面に現れるタイミングをトリガーとして実行する様にすると、パララックスサイトの様にスクロールするとコンテンツがフェードインしてくる様なページを作成する事が出来ます。

今回はここまでです。
次回もよろしくお願いします。