目次

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

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

◆ はじめに

DOMの雰囲気がわかったところで、今度は、DOMをつかってHTML文書のスタイルをいろいろ変更してみましょう!

変更は、getElementById取得した要素オブジェクトのスタイルプロパティをいろいろ変えます。まずは、p要素オブジェクトのスタイルプロパティを見てみましょう。

◆ スタイルプロパティ

従来のIEでの allコレクションで取得した要素オブジェクトのスタイルプロパティとほぼ同じものが、DOMにも実装されています。では、そのスタイルプロパティをp要素を例に表示するスクリプトを見ていきましょう。

尚、getElementById、appendChild、createTextNode、createTextNode等がわからない人は、前ページを参照のこと。

<script type="text/javascript">
<!--
function styleAll(id){
  var obj = document.getElementById(id).style; //該当要素のスタイルオブジェクトを求める

  if(obj){
     for( i in obj  ){		//idの要素のオブジェクトの一覧
        document.getElementById('test2').appendChild(document.createTextNode(i));//属性名
        document.getElementById('test2').appendChild(document.createElement('br'));//改行
     }
  }
  else{
     alert('あなたのブラウザは DOM 未サポートです');
  }
}
// -->
</script>
<p id="test2" onClick="styleAll('test2')">この文をクリックしてください。本p要素のスタイルプロパティがわかります。<br></p>

この文をクリックしてください。本p要素のスタイルプロパティがわかります。

表示されたプロパティ名は、NN6.xではCSS2のプロパティ名と同じになっています(ただし、ハイホン"-"は削除され、その直後が大文字になります)。IE6.xは雰囲気で判断するしかないみたい...。

◆ スタイルの変更

では、スタイルを変更してみましょう。まずは、テキストの文字色と背景色から...。

<script type="text/javascript">
<!--
var wkccolor=""; //文字色名保存エリア初期化
var wkbcolor=""; //背景色名保存エリア初期化
function chgColorOfChar_Click(id){//クリック時の処理
  var obj = document.getElementById(id);
  if(obj.style){
     if(obj.style.color != "red") wkccolor = obj.style.color;
     obj.style.color = "red";//プロパティ変更
  }
  else{
     alert('あなたのブラウザは DOM 未サポートです');
  }
}
function chgColorOfChar_Dblclick(id){//ダブルクリック時の処理
  var obj = document.getElementById(id);
  if(obj.style){
     obj.style.color=wkccolor;//プロパティ変更
  }
  else{
     alert('あなたのブラウザは DOM 未サポートです');
  }
}
function chgBackcolor_Click(id){//クリック時の処理
  var obj = document.getElementById(id);
  if(obj.style){
//   if(obj.style.backgroundColor != "green") wkbcolor = obj.style.Color; 2004/05/12修正
     if(obj.style.backgroundColor != "green") wkbcolor = obj.style.backgroundColor;
     obj.style.backgroundColor = "green";//プロパティ変更
  }
  else{
     alert('あなたのブラウザは DOM 未サポートです');
  }
}
function chgBackcolor_Dblclick(id){//ダブルクリック時の処理
  var obj = document.getElementById(id);
  if(obj.style){
     obj.style.backgroundColor=wkbcolor;//プロパティ変更
  }
  else{
     alert('あなたのブラウザは DOM 未サポートです');
  }
}
// -->
</script>
<p id="test1" onclick="chgColorOfChar_Click('test1')" ondblclick="chgColorOfChar_Dblclick('test1')">この文をクリックしてください。赤色に変わります! ダブルクリックで元に戻ります。</p>
<p id="test3" onclick="chgBackcolor_Click('test3')" ondblclick="chgBackcolor_Dblclick('test3')">こちらをクリックすると背景色が変わります。ダブルクリックで元に戻ります。</p>

この文をクリックしてください。赤色に変わります! ダブルクリックで元に戻ります。

こちらをクリックすると背景色が変わります。ダブルクリックで元に戻ります。

要は、各イベント発生時に該当要素のスタイルプロパティを変更しているだけです。

◆ おわりに

ということで、イベント種類イベント処理CSSスタイルプロパティを各々参照して、いろいろ組み合わせて、いろいろ遊んでみてください。そう、これが一番の習得方法ですね!

尚、DOMでのNN6.xのスタイルオブジェクトのプロパティ名は、CSS2のプロパティ名からハイホン"-"を削除し、その直後を大文字にした名前になります。

次回は、要素のクラス属性そのものを変えてしまう方法や、そのクラスの中に新たな規則(CSSの定義)を追加する方法などを勉強していきましょう。ではまた!

目次