備忘録的プログラミングリファレンス

CSSStyleDeclaration インターフェイス

 CSSStyleDeclaration インターフェイスは、スタイル情報をもつオブジェクトを定義しているインターフェイスで、スタイル情報を操作するためのプロパティ、メソッドを提供します。

CSSStyleDeclaration.cssText
var text_css = getComputedStyle( document.querySelector('p') ).cssText;
詳しくはExampleを参照してください

 スタイル情報のオブジェクトとは、CSSファイルやstyle属性、<style>エレメントで定義されるwebページのレイアウトや装飾に関するオブジェクトデータです。 Window、Document、各エレメントに定義されたスタイル情報を確認するにはこの CSSStyleDeclaration オブジェクトを参照します。

 Window、Document、各エレメントからスタイル情報オブジェクトにアクセスするには以下のような方法を使います。

Window
Window.getComputedStyle( HTMLElement )。引数にエレメントオブジェクトを指定
Document
CSSStyleSheet オブジェクトを経由。最初の CSSStyleDeclaration オブジェクトは、 document.styleSheets[0].cssRules[0].style
各エレメント
HTMLElement.style で( CSSStyleDeclaration オブジェクト )

プロパティ(Properties)

Property概要
.cssTextテキストのスタイル定義。このプロパティでスタイルを設定できる
.lengthプロパティ数
.parentRule CSSRule オブジェクト
.cssFloatスタイルのfloatプロパティのみの取得と設定

 スタイルとして定義されるプロパティ名をプロパティとして指定するとその値の取得と設定ができます。

エレメントの高さを取得
var height_ = document.getElementsByTagName('p')[0].style.height;

メソッド(Methods)

Method概要
.getPropertyPriority()引数のプロパティ名の、"important" といった優先度を返す。
.getPropertyValue()引数のプロパティ名の値を返す
.item()引数の数値からその順番にあたるプロパティ名を返す
.removeProperty()引数のプロパティ名からそのプロパティを削除
.setProperty()プロパティ名、値、優先度から該当するプロパティを更新。なければ新規に作成する

Example

 CSSStyleDeclaration.cssTextの例です。 エレメントから取得するCSSStyleDeclaration.cssTextの内容と、HTMLElement.style.cssTextの内容が違います。
 各プロパティを取得するには.getPropertyValue()メソッドを利用したほうがよいようです。
 .cssTextを使ってスタイルを変更する場合は、HTMLElement.style.cssText を使った方がよいようです。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。