Web Developer's Room
HOME > スタイルシート講座 > スタイルシートで動きをつける(2)     

スタイルシートで動きをつける(2)

IE5.0より導入されたHTC(HTML Components)を使って、スタイルシートに記述したタグの振る舞い(behavior)を
JavaScriptやVBScriptなどで記述することができます。(IE5より)
以下のように同じフォルダ内test.csstest.htctest.htmというファイルを作ります。

ファイル名:test.css
body { behavior:url(test.htc)}

【説明】
<body>behavior(振る舞い)を、test.htcに任せます。

ファイル名:test.htc
<public:component>
<script language="Javascript">

attachEvent("onclick",Click_Sub);

function Click_Sub() {
   alert(event.srcElement.tagName);
}

</script>
</public:component>

【説明】
attachEventonclickを取得します。
振る舞いに対して(ここではonclickに対して)、動作を記述します。

ファイル名:test.htm
<html>
<link rel="stylesheet" type="text/css" href="test.css">
<body>

<div>ここをクリックしてください。</div>
<span>ここをクリックしてください。</span>
<b>ここをクリックしてください。</b>

</body>
</html>

【説明】
クリックされたタグ名が表示されます。

 サンプル

関連リンク
  • スタイルシートとは
  • スタイルシートの作り方
  • スタイルシートで使用できる属性
  • スタイルシートで複数の属性を設定する
  • スタイルシートでクラスを設定する
  • スタイルシートで動きをつける(1)




  • スポンサードリンク


    (C) Web Developer's Room All rights reserved.