第63回 「文字の背景色とサイズを変える」
今回は文マウスが乗ったら文字の背景色と文字サイズを変えるプログラムについて説明します。
まず背景色ですがスタイルシートでは以下のようにbackground-colorで指定します。
background-color: 色
色は色名またはカラーコードです。前回のcolorプロパティで指定できるものと同じです。JavaScriptで制御する場合にはbackground-colorの-の後の文字を大文字にして利用します。これは以下のようになります。
document.getElementById(オブジェクト名).style.backgroundColor
以下は前回のthisを利用したプログラムに修正を加えて背景色が変更されるようにしたものです。
<html>
<head>
<title></title>
<style type="text/css"><!--
#myText {
background-color: white;
}
--></style>
<script language="JavaScript"><!--
function changeTextColor(obj,cName)
{
obj.style.backgroundColor = cName;
}
// --></script>
</head>
<body>
<div id="myText" onMouseover="changeTextColor(this,'orange')" onMouseout="changeTextColor(this,'white')">
マウスを乗せると背景色がオレンジになります。
</div>
</body>
</html>
colorプロパティのかわりにbackgroundColorプロパティになっただけです。
次に背景色の変更と同時に文字サイズも変更してみます。文字サイズはスタイルシートでは以下のように指定します。
font-size:サイズ
文字サイズは
12pt
12px
12cm
など「単位をつけて」指定します。指定できる単位は以下のページにあります。
http://msdn.microsoft.com/workshop/author/css/reference/lengthunits.asp
JavaScriptで文字サイズを指定する場合にも単位を付けます。単位を付けなくても制御はできますが、トラブルを防ぐために必ず単位を指定した方が良いでしょう。
以下のプログラムが背景色と文字サイズを変更するものです。
<html>
<head>
<title></title>
<style type="text/css"><!--
#myText {
background-color: white;
}
--></style>
<script language="JavaScript"><!--
function changeTextColor(obj,cName,fSize)
{
obj.style.backgroundColor = cName;
obj.style.fontSize = fSize;
}
// --></script>
</head>
<body>
<div id="myText" onMouseover="changeTextColor(this,'orange','48pt')" onMouseout="changeTextColor(this,'white','16pt')">
マウスを乗せると背景色がオレンジになり文字サイズが大きくなります。
</div>
</body>
</html>
次回は文字を画面上の任意の位置に表示させるプログラムについて説明します。