| ポイント |
<![CDATA[
obj.style.backgroundColor = col;
obj.style.fontSize = size;
<a href="#" id="myText1" onMouseover="change(this,'orange','24pt')"
onMouseout="change(this,'white','12pt')">
]]>
|
| 説 明 |
文字のスタイルを変更するにはaタグをオブジェクトとして関数に渡します。aタグをオブジェクト自身として渡すにはthisを指定します。サンプルではthisを渡して引数objで受け取り「obj.style.スタイル属性名」として各種スタイルを変更しています。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>マウスが重なったら文字のスタイルを変える（thisを利用）</title>
<script Language="JavaScript"><!--
function change(obj,col,size)
{
obj.style.backgroundColor = col;
obj.style.fontSize = size;
}
// --></script>
</head>
<body bgcolor="white">
<a href="#" id="myText1" onMouseover="change(this,'orange','24pt')"
onMouseout="change(this,'white','12pt')">マウスを乗せて【１】</a><br>
<a href="#" id="myText2" onMouseover="change(this,'red','48pt')"
onMouseout="change(this,'white','12pt')">マウスを乗せて【２】</a><br>
</body>
</html>
]]>
|
| 補足説明 |
aタグであればa:hover{ background-color:orange; font-size:24pt; }のようにスタイルシートで指定することもできます。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
マウスが重なったら個別に文字のスタイルを変える（thisを利用）