Document Object Model
Written 1/20/01
8. CSS(1)
CSS をスクリプトで操作する方法を述べています。 ここのスクリプトはほとんどIE4以上でしか動かないでしょう。
■CSSの基礎
スタイルの指定方法には基本的に2種類あります。 １つはスタイルシートで指定する方法です。 
  <STYLE TYPE="text/css">
  <!--
    a       {text-decoration:none;color:blue}
    .test   {text-decoration:none;color:blue}
  -->
  </STYLE>
普通はこのようにスタイルの指定をまとめてヘッダ部に書いておきます。 これを（たぶん）1枚のスタイルシートと呼びます。
実はこのページは外部のファイルに上のような感じで書いておき、 次のようにそれを参照しています。 
  <LINK REL="STYLESHEET" TYPE="text/css" HREF="dom.css">
このように外部のファイルを参照して定義することもできます。
ここでこうしているのは各ページが同じスタイルシートを使うからです。

もう１つは次のように個々のHTML要素にインラインに書いておく方法です。 

  <SPAN STYLE="color:red">赤</SPAN>
スタイルシートの書式は次のようです。 
  selector {attribute:value;...}
selector の書式は次のようです。 
  tagname.classname#id
tagname と classname と id はどれかがあればよいです。
■個々のスタイルを変更する
個々のHTML要素のスタイルを変えるには次のようにします。 
  IE4:  HTMLElement.style.attribute = value
  NN4:  HTMLElement.attribute = value
例えば次のようなHTML要素があるとします。
牛乳は白い

コードは次のようです。

 <DIV ID=div1 STYLE="position:relative;top:10;font-weight:bold;color:blue">
  牛乳は白い
 </DIV>
これをスクリプトで少し右に動かしましょう。 
  if(document.all)
    div1.style.left = 50;
  else if(document.layers)
    document.div1.left = 50;
■styleSheetオブジェクトを得る
次のように styleSheet オブジェクトを得ることができます。 
  document.styleSheets(index)
index は0から始まる整数か、そのスタイルシートの ID です。
スタイルシートが何枚あるかは length プロパティでわかります。 
  <INPUT TYPE="button" VALUE="押してね☆"
            ONCLICK="alert(document.styleSheets.length)">
■スタイルルール
スタイルシートの中の１つのまとまったスタイルの定義、例えば次のようなもの 
    a       {text-decoration:none;color:blue}
をスタイルルールと呼びます。これは次のように得られます。 
  stylesheet.rules(index)
index は0から始まる整数か、要素の ID です。
スタイルルールには selectorText と readOnly と style というプロパティがあります。 readOnly は外部のファイルを参照している場合に true となります。 というプロパティがあります。 
    with(document.styleSheets(1).rules(4)) {
        alert(selectorText);        //A
        alert(readOnly);            //false
        alert(style.color);         //blue
    }
例えば、次のような要素があったとします。

女王様の指名

コードは次のようです。 

  <DIV CLASS=TEST ID=GUAM>女王様の指名</DIV>
このクラスのスタイルは次のように定義されています。 
    .test   {text-decoration:none;color:blue}
この色を変えるには２つの方法があります。
直接ルールを変えるには次のようにします。 
  document.styleSheets(1).rules(1).style.color = 'red';
ルールを追加する方法もあります。
直接ルールを変えるには次のようにします。 
  document.styleSheets(1).addRule('#guam', 'color:green');
addRule メソッドは次のように使います。 
  stylesheet.addRule(selector, style [, index])
style は例のようにスタイルシートを定義するのと同じように書きます。 index はルールを追加する位置を表す整数で、 0 だと最初、デフォルトは最後に追加します。
上の例は ID に対するルールなので、 クラスに対するルールより優先度が高くなるため常にスタイルが反映されますが、 同じようにクラスに対するルールを追加した場合、 後で定義したほうが優先されるため、 前に追加するとスタイルが反映されないということもあります。 
  document.styleSheets(1).addRule('.test', 'text-decoration:underline', 1);
■styleSheetオブジェクトを得る
次のように styleSheet オブジェクトを得ることができます。 
  document.styleSheets(index)
index は0から始まる整数か、そのスタイルシートの ID です。
スタイルシートが何枚あるかは length プロパティでわかります。 
  <INPUT TYPE="button" VALUE="押してね☆"
            ONCLICK="alert(document.styleSheets.length)">
■スタイルシートを替える
外部ファイルを参照するタイプのスタイルシートでは、 その参照先を変えることでスタイルシートを替えることができます。 
    document.styleSheets(index).href = cssfilename
■スタイルシートの追加
スタイルシートの追加はできないようです。 新たにスタイルルールを定義したい場合は、 あらかじめダミーのスタイルシートを作っておきましょう。
Back