JavaScriptでインラインCSSを操作するにはstyleプロパティを使って次のように設定する。
要素ノード.style.スタイルプロパティ名[=設定値]
しかし、HTML5からはCSSStyleDelclarationインタフェースと呼ばれるAPIが実装されており、もう少しさらに詳細な制御が可能になっている。
CSSStyleDelclarationインタフェースは、これまでのstyleプロパティに、さまざまなプロパティやメソッドを備えることで実現している。
使い方のサンプル
<div id="triangle"></div>
<script type="text/javascript">
window.onload = function(){
// div要素のノードオブジェクト
var div_el = document.getElementById("triangle");
// div要素のCSSStyleDeclarationオブジェクト
var s = div_el.style;
// div要素にインラインスタイルをセット
s.width = "0px";
s.height = "0px";
s.borderBottom = "100px solid green";
s.borderLeft = "50px solid white";
s.borderRight = "50px solid white";
// インラインスタイルをテキスト表示
console.log("---\nインラインスタイルのテキスト");
console.log(s.cssText);
// インラインスタイルを分離して表示
console.log("---\nインラインスタイルの分離して表示");
for( var i=0; i<s.length; i++ ) {
var name = s.item(i); // プロパティ名
var value = s.getPropertyValue(name); // 値
console.log(name + ": " + value);
}
// インラインスタイルをセット(優先度含む)
s.setProperty("border-bottom-color", "red", "important");
// 優先度を取得して表示
console.log("---\n優先度を取得して表示");
console.log(s.getPropertyPriority("border-bottom-color"));
}
</script>
CSSStyleDelclarationインタフェース
| メソッド | 内容 |
|---|---|
| getCssText() | 宣言ブロックの、解析可能なテキスト表現(宣言を囲んでいる中括弧は除く) |
| getLength() | この宣言ブロック内で明示的に設定されているプロパティの数。有効なインデックスの範囲は、0 から length-1 まで |
| getParentRule() | この宣言ブロックを含んでいる CSS ルール。この CSSStyleDeclaration が CSSRule に結び付けられていない場合は null 。 |
| getPropertyCSSValue(String propertyName) | この宣言ブロック内で明示的に設定されている CSS プロパティの値のオブジェクト表現を取得する。指定されたプロパティが短縮形の場合、このメソッドは null を返す。短縮形のプロパティの値は、getPropertyValue および setProperty メソッドを使用して、文字列としてのみ取得したり修正したりできる。 パラメータ:propertyName – CSS プロパティの名前。 戻り値:プロパティがこの宣言ブロック内で明示的に設定されている場合は、そのプロパティの値を返す。そのプロパティが設定されていない場合は、null |
| getPropertyPriority(String propertyName) | この宣言ブロック内で明示的に設定されている CSS プロパティの優先順位 (たとえば、「important」識別子) を取得する。 パラメータ:propertyName – CSS プロパティの名前。 戻り値:存在する場合、優先順位を表す文字列 (たとえば、「important」)。存在しなければ、空の文字列 |
| getPropertyValue(String propertyName) | この宣言ブロック内で明示的に設定されている CSS プロパティの値を取得する。 パラメータ:propertyName – CSS プロパティの名前。 戻り値:プロパティがこの宣言ブロック内で明示的に設定されている場合は、そのプロパティの値を返す。そのプロパティが設定されていない場合は、空の文字列を返す |
| item(int index) | この宣言ブロック内で明示的に設定されているプロパティを取得する。このメソッドを使用して取得するプロパティの順序は、設定された順序と同じである必要はない。このメソッドは、宣言ブロック内のすべてのプロパティを繰り返して処理するために利用できる。 パラメータ:index – 取得するプロパティ名のインデックス 戻り値:この順序位置にあるプロパティの名前。この位置にプロパティが存在しない場合は、空の文字列 |
| removeProperty(String propertyName) | この宣言ブロック内で明示的に設定されている CSS プロパティを削除する。パラメータ:propertyName – CSS プロパティの名前。 戻り値:プロパティがこの宣言ブロック内で明示的に設定されている場合は、そのプロパティの値を返す。そのプロパティが設定されていない場合、またはプロパティ名が既知の CSS プロパティに対応していない場合には、空の文字列を返す |
| setCssText(String cssText) | 宣言ブロックの、解析可能なテキスト表現 (宣言を囲んでいる中括弧は除く) 。この属性に値を設定すると、新しい値が解析されて、宣言ブロック内のすべてのプロパティーがリセットされる。これには、プロパティーの削除や追加も含まれる |
| setProperty(String propertyName,String value,String priority) | この宣言ブロック内にプロパティ値と優先順位を設定する。 パラメータ: propertyName – CSS プロパティの名前。 value – そのプロパティの新しい値 priority – そのプロパティの新しい優先順位 (たとえば、「important」) |