動的なスタイル情報の利用

DOM の一部である CSS Object Model (CSSOM) では、 CSS に関する様々な情報を操作するインターフェイスを公開しています。これらは DOM Level 2 Style 勧告で定義されたのち、現在ではそれを置き換える CSS Object Model (CSSOM) で規格化されています。

多くの場面で、可能であれば className プロパティを使ってクラスを操作することが推奨されます。最終的なスタイルをひとつのスタイルシートで制御できる上、JavaScript コードはスタイルの詳細を気にすることなく、正確な詳細はスタイルシートに任せたまま、作成・操作する各セクションの全体的な意味づけに注目できます。しかしながら（スタイルシート全体もしくはある要素についての）個々のルールを操作する方が便利なこともあり、以下でさらに詳しく説明します。なおスタイルシートを操作するといっても物理的な文書を操作するわけではなく、要素の DOM スタイルのような内部表現を操作しているだけということに注意してください。

基本となる style オブジェクトは Stylesheet インターフェイスと CSSStylesheet インターフェイスを公開しています。これらのインターフェイスが備える insertRule, selectorText, parentStyleSheet などのメンバーを使うことで、CSS スタイルシートを構成する個々のスタイルにアクセス・操作できます。

document から style オブジェクトの集合を取得するには document.styleSheets プロパティを使い、インデックスを付けることで個々のオブジェクトにアクセスできます (ドキュメント内の最初のスタイルシートなら document.styleSheets[0] といった具合に)。

CSSOM を使ってスタイルシートを変更する

html

<html lang="en">
  <head>
    <title>Modifying a stylesheet rule with CSSOM</title>
    <style>
      body {
        background-color: red;
      }
    </style>
    <script>
      const stylesheet = document.styleSheets[0];
      stylesheet.cssRules[0].style.backgroundColor = "aqua";
    </script>
  </head>
  <body>
    body の背景色に対するスタイルシートを JavaScript で変更しています。
  </body>
</html>

結果

DOM の style プロパティで利用可能なプロパティの一覧は DOM CSS プロパティリストに載っています。

CSS の構文を使って文書のスタイルを変更したい場合は、ルールを追加するか、innerHTML に CSS を設定した <style> を挿入してください。

要素のスタイルを変更する

要素の style プロパティ（後述する "DOM Style オブジェクト" も参照）を使って個々の要素のスタイルを取得または設定することもできます。ただしこのプロパティはインラインに指定された style 属性しか考慮しません。つまり <td style="background-color: lightblue"> であれば "background-color:lightblue" という文字列、もしくは element.style.propertyName を通してこのスタイルにアクセスできますが、スタイルシートで定義された他のスタイルの存在は考慮されません。

また要素のこのプロパティの設定値は、よそでこの要素に定義されたスタイルよりも優先されます。例えばここで border プロパティを設定した場合、その要素に対して head 部や外部のスタイルシートで定義されていた border プロパティの指定を上書きすることになります。しかし、その要素に適用される他のプロパティ、 padding や margin や font などには影響を与えません。

具体的な要素のスタイルを変更するには、スタイル設定したい要素に対して以下の例を適用します。

html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style example</title>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    </script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    </style>
  </head>

  <body>
    <!-- スタイルを変える要素のオブジェクトとして 'this' を渡す -->
    <p id="p1" onclick="alterStyle(this);">
     クリックして背景色を変更
    </p>

    <!-- スタイルを変える要素の ID 'p1' を渡す -->
    <button onclick="resetStyle('p1');">背景色をリセット</button>

  </body>
</html>

document.defaultView オブジェクトの getComputedStyle() メソッドは、その要素に対して計算された全てのスタイルを返します。

DOM スタイルオブジェクト

style オブジェクトは、個々のスタイル設定を表します。スタイルオブジェクトは document からも、そのスタイルが適用される要素からもアクセスすることができます。これは、具体的な要素のインラインスタイルを表します。オブジェクトは独立したスタイル指定です。

style プロパティの設定

この記事で例示した CSS プロパティに限らず、 style オブジェクトを通して要素のスタイルを個別に操作できるという点が重要です。

html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Example</title>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    </script>
  </head>

  <body>
    <div id="d" class="thunder">Thunder</div>
    <button onclick="setStyle()">テキストの色を変える</button>
    <button onclick="resetStyle()">テキストの色を元に戻す</button>
  </body>
</html>

スタイルの media や type は存在しないこともあります。

setAttribute メソッドの利用

なお、要素のスタイルを変更するには、その要素の参照を取得し、その要素の setAttribute メソッドを使用してCSSプロパティとその値を指定することも可能です。

const el = document.getElementById('some-element');
el.setAttribute('style', 'background-color:darkblue;');

setAttribute を使うと要素の style オブジェクトで定義されていた既存の style プロパティの指定は全て失われることに注意が必要です。もし上の例に使った some-element 要素の style 属性がインラインで style="font-size: 18px" のように指定されていた場合、この指定は setAttribute を使うことで失われます。