今回は CSS をスクリプトで操作する方法のネスケ4編です。

ネスケ4ではスタイルシートを JavaScript で指定することができ、 これを JSSS（JavaScript Style Sheets）と言います。

  <STYLE TYPE="text/css">
  <!--
    span    {color:red}
    .by     {background:yellow}
    #div1   {background:green}
  -->
  </STYLE>
 

と同じことを JSSS で記述してみましょう。 次のようなコードに適用にします。

  <DIV CLASS=BY>オッドちゃんは<SPAN>可愛い</SPAN>ですねえ。</DIV>
  <DIV ID=div1>みんなも見るもに！</DIV>
 

例えば上のようにスタイルシートがあったとすると、 これを JSSS では次のように指定します。

  if(document.all) {            //for IE4 or later
    document.styleSheets(0).addRule("span", "color:red");
    document.styleSheets(0).addRule(".by", "background:yellow");
    document.styleSheets(0).addRule("#div1", "background:green");
  }
  else if(document.layers) {    //for NN4
    document.tags.span.color = "red";
    document.classes.by.all.backgroundColor = "yellow";
    document.ids.div1.backgroundColor = "green";
  }
 

すなわち、タグ・クラス・IDに対し次のようにスタイルを指定します。

  document.tags.tagname.attribute = value
  document.classes.classname.tagname.attribute = value
  document.ids.id.attribute = value
 

クラスのスタイルを指定するときはタグ名も要るのですが、 サンプルのように all として特に指定しないようにもできます。

実は、各要素はいったん表示されるとスタイルは変更できません。
ですから、上のスクリプトは表示される前に実行しています。
ですから、互換性のある普通のスタイルシートの形式で書けばいいので、 ほとんど意味は無いのですが、 write メソッドでもう一度書き直すと反映させられます。

めまいがするぅ〜〜

 

上のテーブルは次のようなコードになっています。

  <LAYER ID="layer1" style="position:relative">
   <TABLE BORDER ID='tbl1'>
   <TR><TD>めまいがするぅ〜〜</TD></TR>
   </TABLE>
  </LAYER>
 

下のスクリプトはテーブルの背景色を設定し、 もう一度 write メソッドで同じコードを書き直しています。

  function test1(form) {
    document.ids.tbl1.backgroundColor = form.elements[0].value;
    
    with(document.layer1.document) {
        open();
        writeln("<TABLE BORDER ID='tbl1'>");
        writeln("<TR><TD>めまいがするぅ〜〜</TD></TR>");
        writeln("</TABLE>");
        close();
    }
  }
 

上のテキストボックスに red とか #FF0000 とか入れてボタンを押すと、 背景色が変わります。