このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
動的なスタイル情報の利用
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 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> であれば "background-color:lightblue" という文字列、もしくはelement.style.propertyName を通してこのスタイルにアクセスできますが、スタイルシートで定義された他のスタイルの存在は考慮されません。
また要素のこのプロパティの設定値は、よそでこの要素に定義されたスタイルよりも優先されます。 例えばここでborder プロパティを設定した場合、 その要素に対して head 部や外部のスタイルシートで定義されていたborder プロパティの指定を上書きすることになります。しかし、その要素に適用される他のプロパティ、 padding や margin や font などには影響を与えません。
具体的な要素のスタイルを変更するには、スタイル設定したい要素に対して以下の例を適用します。
<!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>クリックして背景色を変更</p> <!-- スタイルを変える要素の ID 'p1' を渡す --> <button>背景色をリセット</button> </body></html>document.defaultView オブジェクトのgetComputedStyle() メソッドは、その要素に対して計算された全てのスタイルを返します。
DOM スタイルオブジェクト
style オブジェクトは、個々のスタイル設定を表します。スタイルオブジェクトはdocument からも、そのスタイルが適用される要素からもアクセスすることができます。これは、具体的な要素のインラインスタイルを表します。オブジェクトは独立したスタイル指定です。
style プロパティの設定
この記事で例示した CSS プロパティに限らず、style オブジェクトを通して要素のスタイルを個別に操作できるという点が重要です。
<!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>Thunder</div> <button>テキストの色を変える</button> <button>テキストの色を元に戻す</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 を使うことで失われます。