jQueryからシンプルJSの戻すときに便利なquerySelectorでcssを追加・変更する方法と注意点をまとめました。
querySelector CSS追加・変更方法
querySelectorでのCSS追加・変更方法について書いていきます。
サンプルコード
以下のサンプルコードを作成しました。このサンプルコードをもとに書いていきます。
See the Pen querySelector add css test by Nakamoto (@programmerlife) on CodePen.
querySelectorで1つのスタイルを追加する
font-sizeやcolorだったりひとつのスタイルを追加する方法です。
以下上記から抜粋したJavascriptです。
// check1 add
const elm1 = document.querySelector(‘#check1 ul’);
elm1.style.listStyle = ‘none’;
すでに設定されているCSSに干渉することなく追加できます。
構文
要素.style.プロパティ = ‘ 値 ‘;
この場合のプロバティはキャメル式で書きます。
値をシングルクォーテーションまたはダブルクォーテーションで囲うことを忘れると反映されないこともあるので注意が必要です。
querySelectorで1つのスタイルを変更する
追加と同じ方法で行えます。CSSですでにbackground-colorとfont-sizeを設定していますが、querySelectorで上書きしています。
// check2 change
const elm2 = document.querySelector(‘#check2 ul’);
elm2.style.backgroundColor = ‘#f1f1f1’;
elm2.style.fontSize = ’20px’;
1つずつ書いても問題なく反映されます。
構文は追加時と同じため省略します。
querySelectorで複数のスタイルの追加と変更
まとめてquerySelectorで複数のスタイルを書く方法です。
//check3 several style
const elm3 = document.querySelector(‘#check3 ul’);
elm3.style.cssText = ‘background-color:#00b7ce; font-size:20px; color:#fff;’
上記の例ではすでにcssで書かれている、background-colorを上書き変更し、新たにfont-sizeとcolorを追加しています。
構文
要素.style.cssText = ‘プロパティ:値; プロパティ:値; … ‘
.style.cssTextを使うことでCSSを複数書くことが可能です。
この場合はCSSを書くときと同じ形式で書きます。そのため書き方について悩むこともなく楽かなと思います。
querySelector.style.cssTextでスタイルを複数回書く場合についての注意点
上記の1つのCSSを追加・変更する方法では同じ要素があれば後に書かれたもので上書きされます。
.style.cssTextも同様に上書きされますが、全てのプロパティが上書きされてしまうようです。
そのため+=を用いて内容を追加することが可能です。もし同じプロパティがあった場合後が優先されます。
elm4.style.backgroundColor = ‘#f1f1f1’;
elm4.style.cssText += ‘list-style:none; font-size:20px;’
elm4.style.cssText += ‘color:#fff;’;
もし最後の「elm4.style.cssText += ‘color:#fff;’」の「+=」を「=」にした場合「color:#fff」のみが追加されます。手前で設定したbackgroundColorやlist-style、font-sizeの設定値が最後の.style.cssText上書きされなくなります。すでに設定されていたCSSで書かれているbackground-color:red;は上書きされなくなったため有効になります。
長く書きましたが、基本的には.cssTextを使うときには「+=」を使って追記していく方法が望ましいかと思います。
おわり
やっぱquerySelectorは便利ですね。
何でもできてしまう気がする。できすぎてまとめるのも少し大変。
querySelectorAllを使う場合は調べた限りだとやっぱループで回すのが一般的なようでした。
