スタイルシートを操作する場合
JavaScriptからスタイルシートを操作して見た目を変化させることは多いでしょう。今までの方法ではスタイルを変更したいオブジェクトのstyleの各プロパティを操作していました。例えば以下のサンプルは表示されている文字の上にマウスを重ねると文字の色が赤色に変化します。【
サンプル1を実行】
■HTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="changeCSS.js"></script>
<title>Sample</title>
<style type="text/css"><!--
.normal { font-size:11pt; }
--></style>
</head>
<body>
<div id="content" class="normal">複数のスタイルを入れ替える</div>
</body>
</html>
■スクリプトファイル（changeCSS.js）
window.onload = function() {
var divObj = document.getElementById("content");
divObj.onmouseover = function() {
this.style.color = "red";
}
divObj.onmouseout = function() {
this.style.color = "black";
}
}
この方法には問題があります。例えばデザイン上の変更があり文字の色を赤からオレンジに変更する、といった場合です。この場合にはスクリプト内の該当箇所を変更することになります。変数（定数）でプログラムの先頭に定義しておけば変更は一カ所で済みます。ただし、この変更はプログラマが行うことになります。つまりデザイン上の変更を行う場合にもプログラマの手が必要になってしまいます。簡単なものであればデザイナでも修正は可能でしょう。しかし、複雑で大規模なプログラムになった場合などには危険が伴います。つまり、このようなデザイン上の変更に対してプログラマが関与するのは好ましくないわけです。
このような場合にはstyleの各プロパティを操作するのではなく、スタイルシートで複数のクラスを定義し利用することで解決できます。class属性には半角スペースでクラス名を複数記述することができるので、該当するクラス名だけをreplace()で置換します。これによりデザイン上の変更がある場合にはクラス名で定義したスタイルだけを変更すればよいことになります。プログラムの変更は不要になります。【
サンプル2を実行】
■HTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="changeCSS.js"></script>
<title>Sample</title>
<style type="text/css"><!--
.pointText { color:red; }
.defaultText { color:black; }
.normal { font-size:11pt; }
--></style>
</head>
<body>
<div id="content" class="defaultText normal">複数のスタイルを入れ替える</div>
</body>
</html>
■スクリプトファイル (changeCSS.js)
window.onload = function() {
var divObj = document.getElementById("content");
divObj.onmouseover = function() {
this.className = this.className.replace(/defaultText/, "pointText");
}
divObj.onmouseout = function() {
this.className = this.className.replace(/pointText/, "defaultText");
}
}