CSSStyleDeclaration インターフェイス
CSSStyleDeclaration インターフェイスは、スタイル情報をもつオブジェクトを定義するインターフェイスで、スタイル情報を操作するためのプロパティ、メソッドを提供します。
var text_css = document.querySelector('p')[0].style.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 オブジェクト を取得
ページ内 Index
- ad -
プロパティ(Properties)
| Property | 概要 |
|---|---|
| .cssText | テキストのスタイル定義。このプロパティでスタイルを設定できる |
| .length | プロパティ数 |
| .parentRule | CSSRule オブジェクト |
| .cssFloat | スタイルのfloatプロパティのみの取得と設定 |
スタイルとして定義されるプロパティ名をプロパティとして指定するとその値の取得と設定ができます。
var height_ = document.getElementsByTagName('p')[0].style.cssText;
document.getElementsByTagName('p')[0].style.height = "300px";
ただし、JavaScript における CSS のプロパティ名は、本来の CSS プロパティ名と違うことがあります。 このサイトでは、 CSS のページに JavaScrit おけるスタイルシートのプロパティ名を紹介しています。
メソッド(Methods)
| Method | 概要 |
|---|---|
| .getPropertyPriority() | 引数のプロパティ名の、"important" といった優先度を返す。 |
| .getPropertyValue() | 引数のプロパティ名の値を返す |
| .item() | 引数の数値からその順番にあたるプロパティ名を返す |
| .removeProperty() | 引数のプロパティ名からそのプロパティを削除 |
| .setProperty() | プロパティ名、値、優先度から該当するプロパティを更新。なければ新規に作成する |
Example
CSSStyleDeclaration.cssTextの例です。
エレメントから取得するCSSStyleDeclaration.cssTextの内容と、HTMLElement.style.cssTextの内容が違います。
各プロパティを取得するには.getPropertyValue()メソッドを利用したほうがよいようです。
.cssTextを使ってスタイルを変更する場合は、HTMLElement.style.cssText を使った方がよいようです。
- ad -