むかし別のブログで、jQueryを使わず、プレーンのJavaScriptでCSSを操作する方法をご紹介しましたが、
4年近くが経ち、JSの新しい記述方法に対応したブラウザが増え、
もっと簡単でわかりやすい書き方が可能になってきましたので、
改めて方法をまとめ直してみました。

方法

jQueryのようにCSSのセレクターでまとめて要素を指定して操作する

IE8以上ではquerySelectorAll()を、IE9以上ではforEach()を利用することができるため、2019年現在はほぼ問題なくこちらの方法でCSSを操作することができます。

以前は

という記述方法をご紹介しましたが、この方法ではCSSとプロパティ名をローワーキャメルケースに置き換える必要があり、CSSに慣れていると直感的にわかりにくいという点と、CSSで !importantが使われていると無効化されるというデメリットがあります。

一方今回ご紹介したsetProperty()を使った方法では、CSSと同じプロパティ名で指定できる上、第3引数に’important’を指定すると、JavaScriptから!importantを適用することができます。

querySelectorAll()はCSSのセレクターで要素を指定でき、id, class, タグ名などを問わずに柔軟に要素を指定できるため、基本的にこのメソッドだけで要素の指定は事足りてしまいます。

styleの変更だけでしたら、以前のようにgetElementById(), getElementsByClassName()などのようにターゲットの要素ごとにメソッドを変更する必要はありません。

 

以前はJavaScriptからのCSSの指定が面倒で、それだけのためにjQueryを使うこともありましたが、このくらいの記述だったら、プレーンのJavaScriptを恐れずに使うことができそうです。

 

参考にさせていただいたサイト

Document.querySelectorAll() – Web API | MDN

CSSStyleDeclaration.setProperty() – Web APIs | MDN

JavaScriptでの要素のスタイル操作で !important を使う方法 – Qiita