第61回　「JavaScriptとスタイルシート（２）」

前回のプログラムはInternet Explorer 5以降, Netscape 6以降のブラウザなどDOMに対応している場合には、あまりよくない書き方でした。それでは、どう書けば良いのでしょうか。順を追って説明していきましょう。
　まず、以前に画像オブジェクトの指定方法で
　
document.getElementsById(画像オブジェクト名)

　というのがあったのを覚えているでしょうか。この書き方を使ってJavaScriptで制御を行います。画像オブジェクトだけでなくHTMLで定義されたタグ＝オブジェクトでIDが指定されている（または名前が指定されている）ものであれば何でも構いません。<meta>タグや任意のタグも対象となります。
　オブジェクトのスタイルを指定するには以下のようになります。

document.getElementsById(オブジェクト名).style.プロパティ名

プロパティ名はスタイルシートのプロパティ名になります。例えばスタイルで

top: 100px;

とあれば

document.getElementsById(オブジェクト名).style.top

としてtopプロパティを制御することができます。
このスタイルのプロパティですが非常にたくさんありInternet Explorerの場合は英語ですが以下のページで参照することができます。

http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp

スタイルのプロパティ名が

font-size

のように-が含まれている場合には、-の後に続く文字を大文字にしたものがJavaScriptでのスタイルプロパティ名になります。つまり

fontSize

のように、スクリプトでは

document.getElementsById(オブジェクト名).style.fontSize

のように指定する事になります。

　実際にマウスが乗ったら画像サイズを変更するプログラムでは以下のようになります。
　
<html>
<head>
<title></title>
<script language="JavaScript"></script>
</head>
<body>
<a href="#" onMouseover="setImgSize('myIMG',480,360)" onMouseout="setImgSize('myIMG',320,240)">
<img src="photo1.jpg" id="myIMG" style="position:absolute;width:320px;height240px;">
</a>
</body>
</html>

　getElementByIdを使っているので<img>タグ内ではname属性ではなくid属性で指定しています。上記の書き方ではHTMLタグ内に直接スタイルシートを書いているのですが、これもあまりよくありません。（状況によりけりです。タグ内に直接書かないとJavaScriptでうまく制御できない場合があるためです）
　なるべくHTML、JavaScript、スタイルシートは分離しておくべきです。この場合は以下のようになります。

<html>
<head>
<title></title>
<style type="text/css"></style>
<script language="JavaScript"></script>
</head>
<body>
<a href="#" onMouseover="setImgSize('myIMG',480,360)" onMouseout="setImgSize('myIMG',320,240)">
<img src="photo1.jpg" id="myIMG">
</a>
</body>
</html>

　次回は画像ではなくマウスが乗ったら文字の色を変更するプログラムを作成します。

第61回 「JavaScriptとスタイルシート（２）」

第61回　「JavaScriptとスタイルシート（２）」