はじめに
JavaScriptで、HTML要素のstyle情報（CSS）を取得したいときは
主に classList か getComputedStyle を使用すると良いらしいです。
1. classList を使用する
使用ケース：HTML要素のCSSクラスについてDOMTokenList のメソッドを使用したい時
- HTML要素にCSSクラスを追加したい・削除したい
add()/remove()/toggle()/replace() - HTML要素に特定のCSSクラスが含まれているかを知りたい
contains()
以下の例は add() / remove() / toggle() によってCSSクラスを追加・削除できることを示しています。
CodePenの使い方
 |
| 【使い方】Resultをクリック |
 |
| 【使い方】この画面が表示されたらOK ボタンをクリックすると動作します |
See the Pen Qiita classList by Kohki_Takatama (@Kohki-Takatama) on CodePen.
この他のメソッドに興味がある方は、以下のページをご覧ください。
2. getComputedStyle を使用する
使用ケース：HTML要素のStyle情報を取得したい時
以下の例は element.styleとgetComputedStyle(element)を比較し
getComputedStyle(element) が優れていることを示しています。
CodePenの使い方
|
| 【使い方】Resultをクリック |
|
| 【使い方】この画面が表示されたらOK ボタンをクリックすると動作します |
See the Pen Qiita getComputedStyle by Kohki_Takatama (@Kohki-Takatama) on CodePen.
txt.style
- HTMLに直接書いてある情報（
font-size）にアクセスできる - スタイルシートの情報（
color: red）にアクセスできない - 後から追加された情報（
color: blue）にアクセスできない
getComputedStyle(txt)
- 現在のStyle情報を取得できる
（txt.styleがアクセスできないものにもアクセスできる）font-size: 20px-
color: rgb(255, 0, 0)もしくはcolor: rgb(0, 0, 255)
なお、getComputedStyle(element)は読み取り専用です。
getComputedStyle(element).color = red; などの代入はできません。
3. style を使用する
先ほど触れた点を考慮すると、「情報の取得」における使い道は非常に限定的であると思います。
ただし、「情報の更新・代入」ではstyleを使用します。
おわりに
今回初めてcodepenを記事に埋め込んでみましたが良いですね。
HTML / CSS 周りで引き続きお世話になりそうです。
次は何を書こうかしら・・・
参考