cssRule、CSSRule、ruleNN 6 IE 5 DOM 2

スタイルシート規則のオブジェクトは、ドキュメント内の styleSheet オブジェクトのコレクションの要素です。IE と W3C の DOM では、これらの規則オブジェクトを参照する構文が異なっています。IE では、rules コレクション (rule オブジェクトと呼ばれる単一のオブジェクト) を介して参照します。Netscape 6 と Macintosh 版 IE 5 に実装されている W3C 規格では、cssRules コレクション (cssRule オブジェクトと呼ばれる単一のオブジェクト) を介して参照します。この cssRule オブジェクトは、Windows 版 IE の 6 までのバージョンにはありませんので注意してください。

 

対応する W3C DOM 抽象モデルは CSSRule オブジェクトと呼ばれていますが、このような形式のオブジェクト名は、Netscape 6 の CSSRule オブジェクトでプロトタイプのプロパティとメソッドを変更するスクリプト作成者にとってのみ重要となります。W3C DOM はさらに、各 @ 規則タイプに対して、特殊なタイプの CSSRule オブジェクトを定義しています (CSSImportRule、CSSMediaRule など)。cssRules コレクションの要素はこれらいずれのタイプになることもでき、type プロパティによって、そのようなタイプの要素として識別されます。各タイプにはそれぞれ、cssRule タイプに適用される固有のプロパティセットやメソッドセットがあります。以下のアイテムのプロパティとメソッドのリストで、適用されるタイプを確認してください。ただし、ユーザーがスクリプト記述するインラインの規則は、一般に、CSSStyleRule タイプであると言えます。

 

rule オブジェクトや cssRule オブジェクトにスクリプトでアクセスする場合には注意が必要です。規則のセレクタやスタイルの定義を変更した場合、ドキュメント全体に変更が及ぶため、コロンの配置を間違えるだけでドキュメント内の他の規則まで破壊される可能性もあります。1 つの要素、クラス、要素タイプに対して複数のスタイルを切り替えて適用するには、複数の規則で機能する他の方式 (要素に対する className の割り当てを切り替えるなど) を使用するか、または複数のスタイルシート (styleSheet オブジェクトが有効なシートと無効なシート) を使用する方が、安全で効率的です。ただし W3C DOM では、オブジェクトモデルを完備させるため、スタイルシート規則の各要素にフルにアクセスする方法を特に定義しており、どうしても必要な場合はこれを利用できます。

 
オブジェクト参照
  
document.styleSheets[i].rules[j]
document.styleSheets[i].cssRules[j]
 
オブジェクト固有のプロパティ
 
cssRulescssTextencodinghref
mediaparentRuleparentStyleSheetreadOnly
selectorTextstylestyleSheettype
 
オブジェクト固有のメソッド
 
deleteRule()insertRule()
 
オブジェクト固有のイベントハンドラープロパティ

なし

cssRulesNN 6 IE なし DOM 2

読み取り専用

@media 規則内にネストされている cssRule オブジェクトのコレクションを返します。

 
値

cssRules コレクションオブジェクトへの参照

 
既定値

長さ 0 の配列

 
W3C DOM CSSRule タイプ
  
CSSMediaRule
cssTextNN 6 IE 5(Mac) DOM 2

読み書き

スタイルシート規則のすべてのテキストを示します。セレクタや中かっこ内の属性の「名前/値」のペアを含みます。Windows 版 IE 6 にはこれに相当するプロパティはありません。このプロパティをサポートするブラウザでも、プロパティの変更によってオブジェクトや表示に影響はありません。

 
例
  
document.styleSheets[0].cssRules[2].cssText = "td {text-align:center}";
 
値

文字列

 
既定値

なし

 
W3C DOM CSSRule タイプ

すべて

encodingNN 6 IE なし DOM 2

読み取り専用

@charset 規則に関連付けられている文字コード (ISO-8859-1 や UTF-8 など) を返します。

 
値

文字列

 
既定値

なし

 
W3C DOM CSSRule タイプ

CSSCharsetRule
hrefNN 6 IE なし DOM 2

読み取り専用

@import 規則を介してインポートされる外部スタイルシートファイルの URI を返します。

 
値

文字列

 
既定値

なし

 
W3C DOM CSSRule タイプ
  
CSSImportRule
mediaNN 6 IE なし DOM 2

読み取り専用

@import 規則、または @media 規則に設定されているメディアタイプを返します。

 
値

ブラウザでサポートされているメディアタイプを示す文字列定数 (screen、print など)

 
既定値

all
 
W3C DOM CSSRule タイプ
  
CSSImportRule
CSSMediaRule
parentRuleNN 6 IE なし DOM 2

読み取り専用

@ 規則内にネストされている規則など、現在の cssRule を含む cssRule オブジェクトへの参照を返します。Netscape 6.2 の場合、このプロパティにアクセスすると強制終了することがあります。

 
例
  
var superRule = document.styleSheets[0].cssRules[1].parentRule;
 
値

cssRule オブジェクトへの参照

 
既定値

null
 
W3C DOM CSSRule タイプ

すべて

parentStyleSheetNN 6 IE 5(Mac) DOM 2

読み取り専用

現在の cssRule を含む styleSheet オブジェクトへの参照を返します。cssRule オブジェクトに参照を渡す関数が、styleSheet オブジェクトへの参照を取得できます。取得する目的としては、スタイルシート内に他に何が存在しているかを調べる場合などがあります。

 
例
  
var ss = document.styleSheets[0].cssRules[3].parentStyleSheet;
 
値

styleSheet オブジェクトへの参照

 
既定値

現在のオブジェクト
 
W3C DOM CSSRule タイプ

すべて

readOnlyNN なし IE 5 DOM なし

読み取り専用

@import 規則または link 要素を介してドキュメントに到達する規則に、ブール値 true を返します。これらの規則はスクリプトで変更できません。これらの規則により制御される要素が、変更可能な個別のスタイルプロパティを持っている場合もありますが、その場合の変更の対象は rule オブジェクトではなく要素に固有の style プロパティであるためです。

 
例
  
if (!document.styleSheets[2].cssRules[0].readOnly) {
    // not read-only, so OK to modify here
}
 
値

true または false のブール値
 
既定値

規則タイプによって異なります。
selectorTextNN 6 IE 5 DOM 2

読み書き

スタイルシートルールのセレクタ部分を示します。このプロパティは読み書き可能です (Macintosh 版 IE 5 を除く) が、プロパティを変更してもオブジェクトや表示に影響はありません。

 
例
  
document.styleSheets[0].cssRules[2].selectorText = "td.leftHeaders";
 
値

文字列

 
既定値

なし

 
W3C DOM CSSRule タイプ
  
CSSPageRule
CSSStyleRule
styleNN 6 IE 5 DOM 2

読み書き

現在の規則の属性設定が反映されたプロパティを持つ style オブジェクトを返します。これは、ドキュメント内の要素に関連付けられた style オブジェクトと同種のオブジェクトです (W3C DOM の CSSStyleDeclaration オブジェクトに対応)。スタイルシートの設定を規則レベルで変更する必要がある場合は、rule または cssRule の style プロパティを介して変更します。変更箇所は直ちに登録され、これに応じて、規則の対象となる要素の表示も変わります。

 
例
  
var oneRule;
if (document.styleSheets) {
    if (document.styleSheets[0].cssRules) {
        oneRule = document.styleSheets[2].cssRules[1];
    } else if (document.styleSheets[0].rules) {
        oneRule = document.styleSheets[2].rules[1];
    }
}
if (oneRule) {
    oneRule.style.color = "red";
    oneRule.style.fontWeight = "bold";
}
 
値

style (W3C CSSStyleDeclaration) オブジェクトへの参照

 
既定値

現在の style オブジェクト
 
W3C DOM CSSRule タイプ
  
CSSFontRule
CSSPageRule
CSSStyleRule
styleSheetNN 6 IE なし DOM 2

読み取り専用

インポートされたスタイルシート内の styleSheet オブジェクトへの参照を返します。この参照をもとに、その styleSheet オブジェクトに属する cssRule オブジェクトについて調べることができます。つまり、リモートにあるスタイルシートファイルの styleSheet オブジェクト構造について、複数レベルにわたるドリルダウン分析が可能です。

 
値

styleSheet オブジェクトへの参照

 
既定値

なし

 
W3C DOM CSSRule タイプ
  
CSSImportRule
typeNN 6 IE なし DOM 2

読み取り専用

W3C DOM で定義されている 7 つの cssRule タイプのうちのいずれか 1 つに対応する整数を返します。Netscape 6 の cssRule オブジェクトはすべて、次に示す標準テキストの定数プロパティを備えています。

 
定数相当する整数
cssRuleReference.UNKNOWN_RULE 0
cssRuleReference.STYLE_RULE 1
cssRuleReference.CHARSET_RULE 2
cssRuleReference.IMPORT_RULE 3
cssRuleReference.MEDIA_RULE 4
cssRuleReference.FONT_FACE_RULE 5
cssRuleReference.PAGE_RULE 6
 
例
  
var oneRule = document.styleSheets[2].cssRules[1];
if (oneRule.type == oneRule.IMPORT_RULE) {
    // process @import rule
}
 
値

整数

 
既定値

1
 
W3C DOM CSSRule タイプ

すべて

deleteRule()NN 6 IE なし DOM 2

deleteRule(index)

0 から始まるインデックス番号が付いた規則を現在の @media 規則から削除します。

 
W3C DOM CSSRule タイプ
  
CSSMediaRule
 
パラメータ
 
  • ソースコード順序で指定されたアイテムを示す 0 から始まる整数
 
戻り値

なし
insertRule()NN 6 IE なし DOM 2

insertRule("rule", index)

現在の @media 規則に新しい規則 (セレクタテキストとスタイル属性) を挿入します。挿入する位置は、2 番目のパラメータで指定します。

 
W3C DOM CSSRule タイプ
  
CSSMediaRule
 
パラメータ
 
  • 挿入する規則を構成するセレクタと中かっこ内のスタイル属性を示す文字列
  • ソースコード順序で指定されたアイテムを示す 0 から始まる整数
 
戻り値

挿入位置を示す整数
styleNN 6 IE 4 DOM 2

読み書き

要素に関連付けられた style オブジェクトを示します。このオブジェクトは、タグ内で要素の style 属性に明示的に設定された値で設定されます。W3C DOM オブジェクトの用語では、CSSStyleDeclaration オブジェクトと呼ばれます。ただし、スタイルシートをスクリプトで処理するほとんどの場合には、IE および Navigator では style オブジェクトを同じオブジェクトとして扱うことができます。このプロパティは、要素に関する個々のスタイルシートプロパティ設定を読み書きする開始点となります。要素を実際に制御しているスタイルシートプロパティ (インポートされたスタイルシート属性を含む) を読み取るには、本章冒頭の currentStyle プロパティ (IE の場合) および window.getComputedStyle() メソッド (Netscape 6 の場合) を参照してください。

 
例
  
document.getElementById("elementID").style.fontSize = "14pt";
 
値

style オブジェクト
 
既定値

なし