JSでスタイル情報を取得する【classList / getComputedStyle】

# はじめに

JavaScriptで、HTML要素のstyle情報（CSS）を取得したいときは
主に `classList` か `getComputedStyle` を使用すると良いらしいです。

# 1. `classList` を使用する

使用ケース：**HTML要素のCSSクラスについて`DOMTokenList` のメソッドを使用したい時**

- HTML要素にCSSクラスを追加したい・削除したい
    `add()` / `remove()` / `toggle()` / `replace()`
- HTML要素に特定のCSSクラスが含まれているかを知りたい
    `contains()`

以下の例は `add()` / `remove()` / `toggle()` によってCSSクラスを追加・削除できることを示しています。
<details><summary>CodePenの使い方</summary>

| |
|:--:|
|![スクリーンショット 2024-05-04 8.45.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/1cab3f31-d45c-8178-0ea2-5d2715815879.png)|
|【使い方】Resultをクリック|
|![スクリーンショット 2024-05-04 8.45.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/d6cf1698-450d-cdd8-2f04-4d8e96437645.png)|
|【使い方】この画面が表示されたらOK<br>ボタンをクリックすると動作します|
</details>

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yLrdpWX" data-user="Kohki-Takatama" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Kohki-Takatama/pen/yLrdpWX">
  Qiita classList</a> by Kohki_Takatama (<a href="https://codepen.io/Kohki-Takatama">@Kohki-Takatama</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

この他のメソッドに興味がある方は、以下のページをご覧ください。

https://developer.mozilla.org/ja/docs/Web/API/DOMTokenList
# 2.  `getComputedStyle` を使用する

使用ケース：**HTML要素のStyle情報を取得したい時**

以下の例は `element.style`と`getComputedStyle(element)`を比較し
`getComputedStyle(element)` が優れていることを示しています。


<details><summary>CodePenの使い方</summary>

| |
|:--:|
|![スクリーンショット 2024-05-04 8.45.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/1cab3f31-d45c-8178-0ea2-5d2715815879.png)|
|【使い方】Resultをクリック|
|![スクリーンショット 2024-05-04 8.45.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/d6cf1698-450d-cdd8-2f04-4d8e96437645.png)|
|【使い方】この画面が表示されたらOK<br>ボタンをクリックすると動作します|
</details>

<p class="codepen" data-height="347.3359375" data-default-tab="html,result" data-slug-hash="MWRMVaL" data-user="Kohki-Takatama" style="height: 347.3359375px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Kohki-Takatama/pen/MWRMVaL">
  Qiita getComputedStyle</a> by Kohki_Takatama (<a href="https://codepen.io/Kohki-Takatama">@Kohki-Takatama</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`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 周りで引き続きお世話になりそうです。

次は何を書こうかしら・・・

# 参考

https://dom.spec.whatwg.org/#ref-for-dom-element-classlist%E2%91%A0:~:text=to%20change%20it.-,element%20.%20classList,-Allows%20for%20manipulation

https://developer.mozilla.org/ja/docs/Web/API/DOMTokenList