behaviorとaddRule

JavaScript

IEでHTMLElement.prototypeっぽい動作するものを考えているなかで生み出された副産物です。document.styleSheetsのaddRuleとbehavior:expressionをつかってdiv要素のheaderクラスに所属するidをアラートしています。

<html>
<head>
<style id="behavior"></style>
<script>
function showElementId(e){
     alert(e.id);
     e.style.behavior = null;
};

window.onload = function(){
     document.styleSheets.behavior.addRule('div.header','behavior:expression(showElementId(this));');
};
</script>
</head>
<body>
<div class="header" id="head001"></div>
<div class="header" id="head002"></div>
<div class="header" id="head003"></div>
</body>
</html>

解説?

  • addRuleを利用することでJsから動的にスタイルのルール追加することができます。
  • behavior:expressionすることでCSSにJsが組み込めます。
  • style.behavior = null とすることで追加されたbehaviorが解除されます。(⇒解除しないとalertの連続地獄になります…)

う〜ん。なんの役に立つんだこれ…。IEのみ。