このドキュメントの内容を、『DOMにより、エレメントを変化（へんげ）させる』というコンテンツで新しく書き直しました。
DOM4で追加されたインターフェイスに関しても記載しています。ぜひご覧ください。
これまでの方法は、個々のタグに対して、スタイルを変更するものでした。しかし、状況によっては、複数のタグの内容を、一度に変更したい場合が有ります。
このような場合、スタイルシートのセレクタ毎に、スタイルの内容を設定することができます。
IDLは、以下のようになります。
interface DocumentStyle {
readonly attribute StyleSheetList styleSheets;
};
インターフェイス、DocumentStyleは、documentオブジェクトに実装されているので、documentオブジェクトから、直接styleSheetsアトリビュートを参照できます。
interface StyleSheetList {
readonly attribute unsigned long length;
StyleSheet item(in unsigned long index);
};
itemメソッドは、定義されているスタイルシートがCSSの場合、CSSStyleSheetを返します。
interface CSSStyleSheet : stylesheets::StyleSheet {
-- 省略 --
readonly attribute CSSRuleList cssRules;
-- 省略 --
};
interface CSSRuleList {
readonly attribute unsigned long length;
CSSRule item(in unsigned long index);
};
interface CSSRule {
// RuleType
const unsigned short UNKNOWN_RULE = 0;
const unsigned short STYLE_RULE = 1;
const unsigned short CHARSET_RULE = 2;
const unsigned short IMPORT_RULE = 3;
const unsigned short MEDIA_RULE = 4;
const unsigned short FONT_FACE_RULE = 5;
const unsigned short PAGE_RULE = 6;
readonly attribute unsigned short type;
attribute DOMString cssText;
// raises(DOMException) on setting
readonly attribute CSSStyleSheet parentStyleSheet;
readonly attribute CSSRule parentRule;
};
interface CSSStyleRule : CSSRule {
attribute DOMString selectorText;
// raises(DOMException) on setting
readonly attribute CSSStyleDeclaration style;
};
まず、ドキュメントオブジェクトから、スタイルシートのリストを取得します。このリストの中には、ドキュメントに対して、linkエレメントでリンクされたスタイルシートや、stylesheetエレメントで指定されたスタイルシートが含まれます。
次に、スタイルシートの中から、必要なCSSRuleオブジェクトを検索します。このとき、セレクタ名称などで検索する方法は提供されないので、自分で用意することになります。
必要なCSSRuleオブジェクトさえ見つければ、後は特定のタグのスタイルを変更する場合と、大差有りません。但し、直接スタイルを変更できる、CSSStyleDeclarationオブジェクトを持っているのは、typeがSTYLE_RULE・FONT_FACE_RULE・PAGE_RULEのCSSRuleオブジェクトだけである点に注意が必要です。
また、同じセレクタを複数回定義している様な(カスケードしている)場合、当然同じセレクタ名称が複数見つかる事にも、注意する必要が有るでしょう。
下の例は、指定されたセレクタ名称のCSSRuleオブジェクトを返す関数です。どのような記述のスタイルシートにも対応させるためには、CSSRuleオブジェクトのselectorTextアトリビュートを判定する前に、RuleTypeがSTYLE_RULEかPAGE_RULEである事を、チェックしなければなりません。何故なら、それ以外のRuleTypeの場合、selectorTextアトリビュートが存在しないからです。
標準に準拠したスクリプトはIEでは動作しないので、非標準な実装も含んでいます。
function getCssRuleItemBySelector(selectorText) {
var styleList = document.styleSheets;
for (var i = 0; i < styleList.length; i ++) {
var styleSheet = styleList.item(i);
var cssRuleList;
if ('undefined' != typeof styleSheet.cssRules) {
/*
* 標準に準拠した実装
*/
cssRuleList = styleSheet.cssRules;
}
else {
/*
* 非標準な実装
*/
cssRuleList = styleSheet.rules;
}
for (var j = 0; j < cssRuleList.length; j ++) {
var cssRuleItem = cssRuleList.item(j);
if (cssRuleItem.selectorText == selectorText) {
return cssRuleItem;
}
}
}
return null;
}
上の関数を使って、日英を切替えるサンプルを作ってみました。「翻訳」ボタンを押すと、日英が切り替わります。実際のコードはこのページのソースを参照してください。
これは、ペンです。
This is a pen.
私の名前はマイクです。
My name is Mike.