behaviorプロパティに関するメモ

Web

MSIE独自拡張のCSSプロパティ "behavior" は面白い。JavaScriptによるダイナミックなスタイルの変化を、CSSの内部だけで行なえるのだ。例えばbutton要素の枠線をマウスオーバーで変化させたいと考えた時、普通にやるならば全てのbutton要素に mouseover属性とmouseout属性を付けなければならない。



<button onmouseover="this.style.borderStyle='inset'

 onmouseout="this.style.borderStyle='outset'">

 押しボタン

</button>
ちょっとしたプレゼンテーショナルな効果を持たせたいだけなのに、一つ一つに長い情報を加えなければならないし、何しろそういった視覚情報をHTMLの中に含める事は美しくない。style属性で延々とインラインスタイルを埋め込んでいくのと殆ど同じだ。behaviorプロパティを用いると、何一つHTMLソースを弄る事無くこれらを実現できる。


<script type="text/javascript">

attachEvent("onmouseover", over);

attachEvent("onmouseout", out);

function over() {

  this.style.borderStyle = "inset";

}

function out() {

  this.style.borderStyle = "outset";

}

</script>
このような内容のファイルを一つ用意して、後はCSS内で該当するセレクタから呼び出せば良い。綺麗で変更も簡単だし、見栄えをHTMLから切り離すという本質からなんら逸脱していない。MSIEの独自拡張だが別に動作しなくても支障は無いし、せいぜい Vaildetor で引っ掛かる程度だ。
ところが残念な事に、他のdocumentオブジェクトのプロパティを書き換えられない事に気付いた。このようなスクリプトを思いついたのである。


attachEvent("onmouseover", explain);

function explain(){

  if(this.title){

    document.getElementById("exp").innerHTML = this.title;

  }

}
title属性を持つ要素をマウスが通過した時、特定の要素内にtitle属性の値を展開するというものだ。結果は残念ながら「実装されていません」のエラー。styleオブジェクトは参照できるのに、何故か title や id は参照できない。 document.bgColor などの簡単なプロパティすら参照できなかった。attach() から呼び出す関数に引数を持たせられないのが辛い。所詮は単なるスタイルシート補助用なのだろうか。実験したのがWinIE5.0だからなのかもしれないけれど、例えIE6.0で出来てもエラーメッセージが出るようならば搭載は厳しい。
Proxomitron無しにUser-JavaScript、という夢はあっけなく崩れ去った。
ろくにMSDNも見ずに手探りで試したので、もしかしたら根本的に間違っているのかもしれませんが。何かこの辺りに関する情報がございましたら是非教えてください。