CSS の取得と設定
CSS とは Cascading Style Sheets の略でスタイルシートとも呼ばれ、web ページに配色やエレメントの配置といった装飾を加える機能があります。
ここでは JavaScript で CSS の取得と設定について解説します。
JavaScript で CSS・スタイルシート情報を操作するための情報源は DOM に含まれていません。
DOM より上の Web API 以下のクラスとして扱われています。CSS について調べるときには DOM とは別に記載されていることを念頭においておいた方がよいでしょう。
console.log( document.styleSheets );
web ページのスタイルシート設定は Document.prototype.styleSheets で取得できます。
エレメントごとのスタイルシートの取得は HTMLElement.protorype.style プロパティを使用します。このプロパティは設定をすることもできます。
エレメントの class 属性は Element.classList.add() で追加、 Element.classList.remove() で削除することができます。
スタイルシート情報の取得
ドキュメント全体と各エレメントのスタイルシート情報
web ページのスタイルシート設定を取得するには Document.prototype.styleSheets を使用します。
エレメントごとのスタイル設定は HTMLElement.protorype.style プロパティで取得できます。
console.log( document.styleSheets );
document.styleSheets から取得できる情報は全体のスタイシート設定になります。
タグエレメントごとのスタイシート設定を取得するには以下の HTMLElement.style を使用します。
console.log( document.getElementsByTagName( 'p' )[0].style );
各エレメントのスタイルシートはこの style プロパティによって値を設定することもできます。
エレメントのスタイルシート設定
各エレメントの HTMLElement.protorype.style プロパティでスタイルシートを直接設定することもできます。
JavaScript から CSS、style 属性を直接設定する方法は以下のような構文を使います。
document.getElementsByTagName( 'p' )[0].style.color = 'green';
style プロパティの直後は CSS のプロパティ名になります。CSS でのプロパティ名とは変わりキャメルケースで指定します。
例えば background-color は backgroundColor になります。
document.getElementsByTagName( 'p' )[0].style.color = "white"; document.getElementsByTagName( 'p' )[0].style.backgroundColor = 'black';
style プロパティに直接 CSS のプロパティ名と値をセットで代入できます。ただし、設定してあった内容はすべて更新されます。
document.getElementsByTagName( 'p' )[0].style = "color:white; background-color:black;";
Example style の変更
JavaScript による CSS の操作の例です。
class 属性の変更
class 属性の追加
エレメントの class 属性は Element.classList.add() で追加、 Element.classList.remove() で削除することができます。
document.getElementsByTagName( 'p' )[0].classList.add( 'exampleclass' );
上記の例は、P タグエレメントの class 属性に exampleclass というクラスが追加され、そのクラスの内容がタグエレメントに反映されます。
class 属性の削除
document.getElementsByTagName( 'p' )[0].classList.remove( 'exampleclass' );
Example class 属性の変更
JavaScript による CSS の操作の例です。