DOM要素のスタイルを取得・設定する

前回までの学習で、JavaScriptによるDOM要素の読み書きができるようになりましたが、書き換えられるのは内容のみです。

本記事では、DOM要素のスタイル（style）を取得・設定する方法について学びます。

1 スタイルの取得と設定の書式
2 簡単なサンプルプログラム
- 2.1 解決手段①
- 2.2 解決手段②
3 練習問題
4 最後に
- 4.1 練習問題の解答

スタイルの取得と設定の書式

スタイル取得の書式

HTML要素.style.プロパティ
- 直接スタイル属性に設定されたスタイル（インラインスタイル）のみを取得します。
window.getComputedStyle(Element型のDOM要素)
- すべての適用スタイル（外部CSS、内部スタイル、インラインスタイルなど）を取得します。

スタイル設定の書式

HTML要素.style.プロパティ = 設定する値

書式についての説明

「HTML要素」は、querySelector、querySelectorAllなどを使用して取得したHTMLElement型のオブジェクトです。

続く「style」はHTMLElementが持つプロパティで、読み取り専用です。
このプロパティによりCSSStyleDeclaration型のスタイルを取得できます。

「プロパティ」は、取得するスタイルを指定します。
種類はCSSのスタイルと同じだけ存在します（各々の言語のバージョンアップのタイミングにより同数でない場合もある）が、命名規則が異なります。

CSSプロパティ名は次のルールでJavaScriptの識別子に変換されます。

プロパティが1単語で構成されている場合はそのままです。
- 以前はfloatのみ例外で「cssFloat」とする必要がありましたが、最新バージョンのブラウザではfloatのまま指定できます。
プロパティが複数の単語から構成されているスネークケースの場合は、ハイフン「-」が削除されてキャメルケースに変換されます。
- 例えば「background-color」であれば、「backgroundColor」となります。

簡単なサンプルプログラム

まずは要素のスタイルを取得、設定するサンプルを示します。

次のようなHTMLがあり、h1タグに対してCSSで指定されているスタイル（文字色）を取得し、pタグも同じ文字色に設定するプログラムです。

👇ご覧のとおり、CSSではh1のみ文字色（color）が青（blue）に指定されており、pタグには何のスタイルも設定されていません。

<!-- ここより上は省略-- >
<style>
h1 {
  color: blue;
}
</style>
</head>
<body>
  <h1>タイトル</h1>
  <p>この文章の色は青です。</p>

  <script>
  let h1 = document.querySelector("h1");
  
  document.querySelector("p").style.color = h1.style.color;
  </script>
</body>
</html>

ブラウザ

タイトル
この文章の色は青です。

👆このように、pタグ内の文字色が青くなっていません。
HTMLElement.style.プロパティで取得できるのは、インラインスタイルのみだからです。

この問題を解決するには、2通りの手段が考えられます。

解決手段①

pタグのスタイルをインラインで指定する。

<!-- ここより上は省略-- >
<body>
  <h1 style="color:blue;">タイトル</h1>
  <p>この文章の色は青です。</p>

  <script>
  let h1 = document.querySelector("h1");
  
  document.querySelector("p").style.color = h1.style.color;
  </script>
</body>
</html>

ブラウザ

タイトル
この文章の色は青です。

意図した通り、pタグ内の文字列の色も青になりました。

しかし、インラインスタイルはサイトの規模が大きくなるにつれてメンテナンス性を損なってしまう場合もあります。
できれば外部CSSでのスタイルも取得したいというケースが多いですよね。

そこで次の解決手段の出番となります。

解決手段②

window.getComputedStyleメソッドを使用する。

<!-- ここより上は省略-- >
<style>
h1 {
  color: blue;
}
</style>
</head>
<body>
  <h1>タイトル</h1>
  <p>この文章の色は青です。</p>

  <script>
  let h1 = document.querySelector("h1");
  
  document.querySelector("p").style.color = window.getComputedStyle(h1).color;
  </script>
</body>
</html>

ブラウザ

タイトル
この文章の色は青です。

styleタグによって設定されたスタイルを正しく取得できており、想定通りの挙動となりました。

練習問題

問①
次のHTMLで、JavaScriptを使用してdivの横幅を「200px」に変更してください。

<!-- ここより上は省略-- >
<style>
div {
  border: 1px solid black;
  width: 50px;
</style>
<body>
  <div>Hello</div>

  <script>
  // ここにプログラムを追加
  </script>
</body>
</html>

問②
次のHTMLで、JavaScriptを使用してpタグ内の文字列のフォントサイズを「3em」に変更してください。

<!-- ここより上は省略-- >
<style>
p {
  font-size: 1em;
</style>
<body>
  <p>Hello</p>

  <script>
  // ここにプログラムを追加
  </script>
</body>
</html>

最後に

3記事に渡り、JavaScriptによるDOM操作を学習してきました。
セレクタやスタイルでCSSの知識がそのまま役に立つことが分かります。

学習には積み重ねが大切であることを再認識しますね。

練習問題の解答

問①の回答例

<!-- ここより上は省略-- >
<style>
div {
  border: 1px solid black;
  width: 50px;
</style>
<body>
  <div>Hello</div>

  <script>
  document.querySelector("p").style.width = "100px";
  </script>
</body>
</html>

問②の回答例

<!-- ここより上は省略-- >
<style>
p {
  font-size: 1em;
</style>
<body>
  <p>Hello</p>

  <script>
  document.querySelector("p").style.fontSize = "2em";
  </script>
</body>
</html>

本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。

それでは、最後までお読みいただきありがとうございます。

『詳説 JavaScript』メニューに戻る