[index]
[top]
[bottom]
[prev]
[next]

DOMによるスタイルの操作

チマチマやってられないときは

これまでの方法は、個々のタグに対して、スタイルを変更するものでした。しかし、状況によっては、複数のタグの内容を、一度に変更したい場合が有ります。

このような場合、スタイルシートのセレクタ毎に、スタイルの内容を設定することができます。

IDLは、以下のようになります。

 IDL:Document Object Model Style Sheets 
interface DocumentStyle {
  readonly attribute StyleSheetList styleSheets;
};

インターフェイス、DocumentStyleは、documentオブジェクトに実装されているので、documentオブジェクトから、直接styleSheetsアトリビュートを参照できます。

 IDL:Document Object Model Style Sheets 
interface StyleSheetList {
  readonly attribute unsigned long length;
  StyleSheet item(in unsigned long index);
};

itemメソッドは、定義されているスタイルシートがCSSの場合、CSSStyleSheetを返します。

 IDL:Document Object Model CSS 
interface CSSStyleSheet : stylesheets::StyleSheet {
                  -- 省略 --
  readonly attribute CSSRuleList cssRules;
                  -- 省略 --
};

 IDL:Document Object Model CSS 
interface CSSRuleList {
  readonly attribute unsigned long    length;
  CSSRule item(in unsigned long index);
};

 IDL:Document Object Model CSS 
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;
};

 IDL:Document Object Model CSS 
interface CSSStyleRule : CSSRule {
  attribute DOMString selectorText;
            // raises(DOMException) on setting

  readonly attribute CSSStyleDeclaration  style;
};

まず、ドキュメントオブジェクトから、スタイルシートのリストを取得します。このリストの中には、ドキュメントに対して、linkエレメントでリンクされたスタイルシートや、stylesheetエレメントで指定されたスタイルシートが含まれます。

次に、スタイルシートの中から、必要なCSSRuleオブジェクトを検索します。このとき、セレクタ名称などで検索する方法は提供されないので、自分で用意することになります。

必要なCSSRuleオブジェクトさえ見つければ、後は特定のタグのスタイルを変更する場合と、大差有りません。但し、直接スタイルを変更できる、CSSStyleDeclarationオブジェクトを持っているのは、typeSTYLE_RULEFONT_FACE_RULEPAGE_RULECSSRuleオブジェクトだけである点に注意が必要です。

また、同じセレクタを複数回定義している様な(カスケードしている)場合、当然同じセレクタ名称が複数見つかる事にも、注意する必要が有るでしょう。

下の例は、指定されたセレクタ名称のCSSRuleオブジェクトを返す関数です。どのような記述のスタイルシートにも対応させるためには、CSSRuleオブジェクトのselectorTextアトリビュートを判定する前に、RuleTypeSTYLE_RULEPAGE_RULEである事を、チェックしなければなりません。何故なら、それ以外のRuleTypeの場合、selectorTextアトリビュートが存在しないからです。

標準に準拠したスクリプトはIEでは動作しないので、非標準な実装も含んでいます。

 JavaScript 
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.