JavaScript for CSS

※ 以下はIE4, Netscape 6レベルのブラウザが前提です。

CSSの属性値はJavaScriptを使って動的に変化させることが可能です。

<SCRIPT type="text/javascript">
<!--
function changeColorByClick(id){
  var obj=document.all && document.all(id)
   || document.getElementById && document.getElementById(id);

 if(obj) obj.style.color="red";
  // if(obj && obj.style) の方が安全かも
}
//-->
</SCRIPT>

強調部分は、変更したい属性と属性値を指定します。例えば、次のようにします。

color="red"; // colorをredに変更
fontFamily="serif"; // font-familyをserifに変更（ハイフンは削除して、次の文字を大文字にする）
cssFloat="right"; // floatはプログラミング言語によっては予約語なので例外。IEではstyleFloat。

ブラウザの振り分けは特定のオブジェクトやメソッドが定義されているかどうかで行っています。ブラウザのバージョンをチェックした方が確実かもしれません。

X	document.write(X)
document.documentElement
document.body
document.images
document.applets
document.links
document.forms
document.anchors
document.layers
document.all
document.implementation
document.getElementsByTagName
document.getElementById
document.getElementsByName
document.defaultView
document.styleSheets

ブラウザの対応は以下のようになっていますが、iCabは実装中のようです。

	IE4	Win IE5	Win IE6	Mac IE5	NN4	Netscape6	iCab Pre 2.51
document.documentElement	×	○	○	○	×	○	×
document.body	○	○	○	○	×	○	○
document.images	○	○	○	○	○	○	○
document.applets	○	○	○	○	○	○	○
document.links	○	○	○	○	○	○	○
document.forms	○	○	○	○	○	○	○
document.anchors	○	○	○	○	○	○	○
document.layers	×	×	×	×	○	×	×
document.all	○	○	○	○	×	×	○
document.implementation	×	×	○	○	×	○	○
document.getElementsByTagName	×	○	○	○	×	○	○
document.getElementById	×	○	○	○	×	○	○
document.getElementsByName	×	○	○	○	×	○	○
document.defaultView	×	×	×	×	×	○	×
document.styleSheets	○	○	○	○	×	○	×

それで、動的に変化させる「きっかけ」として、HTML 4.0では以下のような内在イベントが定義されています。

onload

ウインドウあるいは全てのフレームの読み込みが完了した時に発生する。BODYかFRAMESET要素に設定することが出来る。

onunload

ウインドウあるいはフレーム内の文書を破棄する時に発生する。BODYかFRAMESET要素に設定することが出来る。

onclick

要素上でポインティングデバイスのボタンがクリックされた時に発生する。ほとんどの要素に設定することが出来る。

変化させたい要素
イベントを受け取る要素

クリックしたら最初に定義した関数を呼び出すのですが、どの要素を変更するのか教えるためにIDを引数として渡します。一回のイベントで複数の関数を呼び出しても構いません。

変化させたい要素1 | 変化させたい要素2
イベントを受け取る要素

また、一つの要素に複数のイベントを設定することも出来ます。

変化させたい要素
イベントを受け取る要素

イベントを受け取った要素自身を変更するなら、もっと簡単です。thisは関数を呼び出したオブジェクトを参照します。

<SCRIPT type="text/javascript">
<!--
function hideElement(){
 if(document.styleSheets) arguments[0].style.display="none";
}
//-->
</SCRIPT>

変化させたい要素

ブラウザに設定されているデフォルトのアクションをキャンセルするには、return fakseとします。

<SCRIPT type="text/javascript">
<!--
function openWindow(){
 window.open("../index-j.htm");
}
//-->
</SCRIPT>

<SCRIPT type="text/javascript">
<!--
function changeColor(id){
  var obj=document.all && document.all(id)
   || document.getElementById && document.getElementById(id);

 if(obj){
  obj.style[] = "";
  obj.style[] = "";
}
//-->
</SCRIPT>
<!--
以下、いくつかの要素に設定 onclick="changeColor(id)"
-->

ondblclick

要素上でポインティングデバイスのボタンがダブルクリックされた時に発生する。ほとんどの要素に設定することが出来る。この部分をダブルクリックすると、アンダーラインが引かれます。関数定義はソースを参考にして下さい。

onmousedown, onmouseup

それぞれ、要素上でポインティングデバイスのボタンが押された時、離された時に発生するに発生する。ほとんどの要素に設定することが出来る。

onmouseover, onmousemove, onmouseout

それぞれ、要素上にマウスポインタが乗った時、要素上でマウスポインタが動いた時、マウスポインタが要素から離れた時に発生する。ほとんどの要素に設定することが出来る。

onfocus, onblur

それぞれ、要素がポインティングデバイスあるいはタブキーによってフォーカスを受け取った時、失った時に発生する。 LABEL, INPUT, SELECT, TEXTAREA, BUTTON, A, AREA要素に設定できる。

onkeypress

要素上でキーボードのキーが押されて離された時に発生する。ほとんどの要素に設定することが出来る。

onkeydown, onkeyup

それぞれ、要素上でキーボードのキーが押された時、離された時に発生する。ほとんどの要素に設定することが出来る。

onsubmit, onreset

それぞれ、フォームが送信される時、リセットされる時に発生する。FORM要素に設定できる。

onselect

テキスト入力枠のテキストが選択された時に発生する。INPUT, TEXTAREA要素に設定できる。

onchange

コントロールの値が、フォーカスを失った時にフォーカスを受け取った時と異なると発生する。INPUT, SELECT, TEXTAREA要素に設定できる。

FORM要素にonsubmitおよびonreset、各フォームコントロールにそれぞれonclick, ondblclick, onmousedown, onmouseup, onfocus, onblur, onkeypress, onkeydown, onkeyup, onchangeを設定すると、どんな順番でイベントが発生するか?

どんな順番か?

Next | CSS1 主要属性対応表 | HOMEへ戻る