スタイルシートの管理

  • [アーティクル]
Managing Style Sheets Managing Style Sheets *
*前のトピック: エレメント スタイルの変更
*次のトピック: スタイルシートと印刷

スタイルシートの管理

ドキュメントに適用されたカスケーディングスタイルシート（CSS）スタイルの動的な変更は、インラインスタイル（STYLE=属性で定義されたスタイル）に限られていない。ドキュメントのHEADセクション内でLINKタグやSTYLEタグで定義されたグローバル スタイルシートは、スクリプトによって処理できる。グローバル スタイルシートは、Webページに適用されるスタイルを動的に変更できる優れた方法である。

styleSheetsコレクション

グローバル スタイルシートでは、documentオブジェクトのstyleSheetsコレクションからスクリプトにアクセスできる。このコレクションは、HEADセクションのSTYLEエレメントやLINKエレメントのインスタンスを、"text/css"タイプ（またはtype属性）で示している。他のタイプのスタイルシートはサポートされない。インポートされたスタイルシートはSTYLEエレメントに含まれ、そのSTYLEエレメントにstyleSheetタイプとして表示される。STYLEエレメントやLINKエレメントは、windowオブジェクトのcreateElementメソッドを使ってドキュメントに追加できる。このメソッドは、ドキュメントのstyleSheetsコレクションに新しいstyleSheetオブジェクトを追加できる。スタイルルールやインポートされたスタイルシートは、addImportメソッドやaddRuleメソッドによって、このスタイルシートに追加できる。

ドキュメントのスタイルシートにアクセスする際、識別子を使うことができる。LINKエレメントやSTYLEエレメントのID属性を設定することで、スタイルシートの識別子を設定できる。

スタイルシートの不使用

styleSheetオブジェクトは、スタイルシートの使用／不使用を動的に切り替えることができる。disabledプロパティのデフォルト値はfalseであるが、"true"にも設定でき、ドキュメントに適用されているスタイルシートを無効にすることができる。スタイルシートの適用を切り替えることは、Webページのスタイルを動的に変更する別の技術である。

スタイルシートの置き換え

あるスタイルシートを他のスタイルシートに置き換えるには、スタイルシートのhrefプロパティを置き換えるURLに設定する。次にその例を示す。 

if (document.styleSheets(0).href != null)
document.styleSheets(0).href = "newstyle.css";

スタイルシートを置き換えると、styleSheetsコレクションが即座に更新され、その変更が反映される。この方法で置き換えられるスタイルシートは、LINKエレメントや@import文でインクルードされたスタイルシートだけである。STYLEエレメントで定義されたスタイルシートの場合、hrefプロパティはnullである。

スタイルシート ルールの動的な変更

各スタイルシートはルールの集合である。styleSheetオブジェクトのrulesコレクションでは、これらのルールを列挙している。このコレクションは、スタイルシートが無効なときでもアクセスできる。addメソッドやremoveメソッドによって個々のスタイルシートのrulesコレクションにルールの追加や削除が行える。現在無効となっているスタイルシートにルールを追加しても、そのスタイルシートのdisabledプロパティがfalseの間はドキュメントには反映されない。

rulesコレクション中のルールは、ドキュメントのソース順である。CSSの"@import"文を使ってリンクされたスタイルルールは、CSS1の仕様ごとにrulesコレクションに拡張される。

ルールの追加や削除を行うと、rulesコレクション内でのルールの絶対位置は変化する。しかし、他のルールとの相対的な位置は変化しない。新しいルールを追加したときのデフォルト位置は、インデックスを指定しない場合は、コレクションの最後である。これはセレクタの指定ではなく、CSS仕様によって最優先される位置であり、そのルールはドキュメントの最後に適用される。インデックスが指定された場合には、ルールはコレクションの中で現在そのインデックスで指定された位置にあるルールの直前に挿入される。また、インデックスがコレクション内のルールの数よりも大きかった場合には、一番最後に挿入される。

次に、addRuleメソッドを使用した例を示す。 

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JScript">
function newRule() {
document.styleSheets.MyStyles.addRule("P","color:blue");
}
</SCRIPT>
<STYLE ID="MyStyles">
H1 {color:red}
H2 {color:red;font-style:italic}
</STYLE>
</HEAD>
<BODY onclick="newRule()">
<H1>Welcome!</H1>
<P>This document uses style sheets.</P>
<H2>Ways to Include Style Sheets</H2>
<UL>
<LI>LINK
<LI>STYLE
<LI>@import
</UL>
</BODY>
</HTML>

各ルールには、ルールを適用するエレメントを指定するセレクタと、これらのエレメントに適用するstyle属性を指定するスタイル定義リストがある。一般に、セレクタはエレメント、クラス、または識別子の名前であるが、（エレメント名のカンマ区切りリストのように）名前を組み合わせることもできる。各スタイルは、style属性名とその値をコロンで区切って定義する。複数のスタイルを定義する場合はセミコロンで区切って定義する。ルールオブジェクトはreadOnlyプロパティがあり、このプロパティはそのスタイルシートが変更できるかどうかを返す。インポートしたりリンクしたスタイルは変更できないので、readOnlyプロパティでは"true"を返す。

以下の簡単なスタイルシートで、スタイルルールについて考えてみよう。 

<STYLE
ID="MyStyles">
H1 {color:red}
H2 {color:red;font-style:italic}
</STYLE>

上記の例では、rulesコレクションは2つのスタイルルールがある。それぞれのルールには、セレクタとスタイル（そして、対応するプロパティ）がある。最初のスタイルルールでのセレクタは"H1"である。つまり、次のスクリプトを実行すると、H1が返される。 

alert(document.styleSheets[0].rules[0].selectorText); // this returns "H1"

このセレクタ（H1）のスタイルルールを変更する方法を次に示す。 

document.styleSheets[0].rules[0].style.color = "blue";

スタイルシートのユーザー定義

［インターネット オプション］ダイアログの［全般］タブの［ユーザー補助］にある［ユーザー スタイルシート］で、ユーザー定義のスタイルシートを設定することができる。以後、ブラウズするすべてのページにこのスタイルシートが適用される。ドキュメントがロードされると、まずこのスタイルシートが適用されるのだが、ドキュメント中でスタイルシートが定義されていた場合はオーバーライドされる。つまり、ユーザー定義のスタイルシートは、CSS属性のルールが定義されていないページでのみ有効である。また、このユーザー定義のスタイルシートは、styleSheetsコレクションのリストとはならない。

Up トップに戻る
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.