第60回 「JavaScriptとスタイルシート（１）」
今回はJavaScriptとスタイルシートについて説明します。
JavaScriptが誕生した頃はHTML、JavaScriptしかなく、それぞれが少し関係するだけでした。やがて改良が進みJavaScriptでいろいろな事ができるようになりました。そしてスタイルシートが登場します。この時に出てきた考えた方がDOM (Document Object Model：ドキュメントオブジェクトモデル）です。これはWebページの表現を
HTML で 構造を
JavaScript で 動きを
スタイルシート で 見た目を
指定するというもので、それぞれが互いに深く関わるようになりました。DOMに従った、サポートしているブラウザではJavaScriptでスタイルシートの制御を行うことができます。この場合、HTMLで定義されたタグ＝オブジェクトに対して操作する事になります。
例えば以下のプログラムは以前出てきたマウスが乗ったら画像サイズを変更するものです。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setImgSize(imgName,w,h)
{
document.images[imgName].width = w;
document.images[imgName].height = h;
}
// --></script>
</head>
<body>
<a href="#" onMouseover="setImgSize('myIMG',480,360)" onMouseout="setImgSize('myIMG',320,240)">
<img src="photo1.jpg" name="myIMG">
</a>
</body>
</html>
これと同じ事をスタイルシートを定義しJavaScriptで制御するには以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setImgSize(imgName,w,h)
{
document.images[imgName].style.width = w;
document.images[imgName].style.height = h;
}
// --></script>
</head>
<body>
<a href="#" onMouseover="setImgSize('myIMG',480,360)" onMouseout="setImgSize('myIMG',320,240)">
<img src="photo1.jpg" name="myIMG" style="position:absolute;width:320px;height240px;">
</a>
</body>
</html>
<img>タグでstyle属性でスタイルシートを指定しています。ブラウザによってはJavaScriptで操作するプロパティを明示的に指定しておかないと「初期値」「初期値の単位」が異なるため動作結果が異なってしまったり、全く動作しなかったりする事があります。特にページ作成ソフトであるIBM HomePage Builderは、この初期値を指定しないためMac版のInternet Explorerなど他の環境で動作異常を起こしてしまいます。
上記プログラムはJavaScriptで横幅と縦幅を指定していますが、最初のプログラムと異なるのはstyle.width、style.heightのように指定している点です。これにより「スタイルシートのwidth」「スタイルシートのheight」で明示的に指定している事になります。横幅、縦幅だけでなく座標値も指定することができます。それどころかJavaScriptでは、ほぼ全てのスタイルシートのプロパティを制御することが可能です。
上記プログラムはJavaScriptでスタイルシートを制御していますが、このような書き方はあまりよくありません*1。Internet Explorer 5、Netscape 6以上では上記のような書き方ではなく別の書き方をする方が良いでしょう。
次回は、この書き方について説明します。
*1 特定のブラウザ、ブラウザのみに特化するのであれば上記プログラムのような書き方でも問題ありません。しかしXMLやSVGなど他に続くように、つぶしがきく、応用が利くようにしておきたいのであれば、やはり避けるべきでしょう。