目次

オブジェクトなJavaScriptの基礎講座

DOMによるスタイルの変更(その2)

◆ はじめに

各々の要素オブジェクトのスタイルプロパティの変更は、大体、雰囲気がつかめたでしょうか...。

つぎに、要素オブジェクトに対してスタイルプロパティの元であるクラス属性を変えて、クラス属性に依るところのスタイルの全取替えや、また、文書に新たにスタイルシートファイルを適用すべくリンク要素の追加と、追加したスタイルへさらに新たな規則の追加などをみてみましょう。

◆ クラス属性に依るところのスタイルの全取替え

以下は、要素オブジェクトのclassNameプロパティへクラス名を指定することにより、クラス属性を代えてスタイルを変更をしています。

//以下は、head要素内へ記述する
<style type="text/css">
<!--
.class1 {
 text-decoration: underline;
 background-color: blue;
 color: #FFFFFF;
}
.class2 {
 text-decoration: line-through;
 background-color: green;
 color: #FFFFFF;
}
-->
</style>
<script type="text/javascript">
<!--
function chgClass(i,c){
  if(document.getElementById){
    document.getElementById(i).className=c; 
  } 
  else{
     alert('あなたのブラウザは DOM 未サポートです');
  }
}
// -->
</script>

//以下は、body要素内に記述する
<div>
<p id="test1" 
onmouseover="chgClass('test1','class1')"
onclick="chgClass('test1','class2')"
onmouseout="chgClass('test1','')">
onmouseoverでclass1を、onclickでclass2を、onmouseoutで元に戻しています。
</p>
</div>

onmouseoverでclass1を、onclickでclass2を、onmouseoutで元に戻しています。

◆ 新たにスタイルシートファイルを適用すべくリンク要素の追加

従来は、document.writeで、スタイルシートファイル指定のlink要素を書き込んで、新たなスタイルして追加していましが...。 DOMでは、以下のような感じで、追加適用(new.css)します。

<script type="text/javascript">
<!-- 
function addNewlink(){      //new.cssを追加適用する
  if(document.getElementsByTagName){
     var wklink=document.createElement('link');//link要素を作成し、以下属性をセット
     wklink.rel="stylesheet";
     wklink.type="text/css";
     wklink.href="new.css";
     var wkhead=document.getElementsByTagName('head')[0];//一番最初のhead要素(まぁ一つだけど)
     wkhead.appendChild(wklink);//head要素内に今回のlink要素を追加する
  }
  else{
     alert('あなたのブラウザは DOM 未サポートです');
  }
}
function disableLink(){  //最後に追加したnew.cssをdisableにする
  if(document.getElementsByTagName){
     wklink=document.getElementsByTagName('link');
     wklink[wklink.length-1].disabled=true; 
  }
  else{
     alert('あなたのブラウザは DOM 未サポートです');
  }
}
//-->
</script>
<div>
<p id="test2" onclick="addNewlink()">クリックしてみてください。スタイルシートファイル new.css を新たに適用します。</p>
</div>
<p id="testx" onclick="disableLink()">クリックしてみてください。元に戻ります。</p>

クリックしてみてください。スタイルシートファイル new.css を新たに適用します。

クリックしてみてください。元に戻ります。

◆ スタイルへさらに新たな規則の追加(NN6オンリー)

<script type="text/javascript">
<!-- 
function insRule(selector,declarations){
 if(document.all){
    alert('あなたのブラウザはIEですね。さようなら!');
 }
 else{
    var sheets=document.styleSheets;
    if(sheets){
       var wksheet=sheets[sheets.length-1];  // 一番最後のスタイルシート
       wksheet.insertRule(selector+"{"+declarations+"}" , wksheet.cssRules.length);
    }
   else{
      alert('あなたのブラウザは DOM 未サポートです');
    }
 }
}
//-->
</script>
<div>

<p id="test3" onclick="insRule('p','background: #cccccc; color: green')">クリックしてみてください。(onclick="insetRule('p','background: #ffeeee;color: red'))</p>
<form action="javascript3.htm">
<p>
<input value="div" name="selector" size="10">
<input value="text-decoration: underline" name="rule" size="50">
<input type="button" value="追加" onclick="insRule(this.form.selector.value,this.form.rule.value)">
</p>
</form>
</div>

クリックしてみてください。(onclick="insetRule('p','background: #cccccc; color: green'))

セレクタ プロパティ:値

ちょっと解説

styleSheetsオブジェクトは、スタイル要素のではなく、管理されているスタイルシートをアクセスするためのインターフェイスの定義らしい...。実はよくわかりません。

insertRuleメソッドとcssRulesプロパティは各々W3Cの仕様をあたってみてください。また、訳はInterface CSSStyleSheetにあります。

◆ おわりに

どうでしたか、結構、CSS魔術師の気分を味わえたでしょうか...。

尚、本ページを作成するにあたって、以下のページを大変参考にさせてもらいました。謹んで御礼申し上げます。ありがとうございました。

本ページより数段レベルが高いので、是非、アクセスしてみてください!
2002/07/01現在、三日坊主++の部屋は、閉鎖状態の様です。非常に残念です。

目次