2019/10/08
JavaScriptでCSSを操作する方法（IE11以上版）
むかし別のブログで、jQueryを使わず、プレーンのJavaScriptでCSSを操作する方法をご紹介しましたが、
4年近くが経ち、JSの新しい記述方法に対応したブラウザが増え、
もっと簡単でわかりやすい書き方が可能になってきましたので、
改めて方法をまとめ直してみました。
方法
jQueryのようにCSSのセレクターでまとめて要素を指定して操作する
|
1 2 3 4 5 | var targetElements = document.querySelectorAll('.target > a'); targetElements.forEach(function (element) { element.style.setProperty('color', '#f00'); element.style.setProperty('font-weight', 'bold', 'important'); }); |
IE8以上ではquerySelectorAll()を、IE9以上ではforEach()を利用することができるため、2019年現在はほぼ問題なくこちらの方法でCSSを操作することができます。
以前は
|
1 | element.style.fontWight = 'bold'; |
という記述方法をご紹介しましたが、この方法では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
Author Profile
SHARE
