スタイルシートへアクセスする

スタイルシートプロパティに書き込む

エレメントのスタイルシートにアクセスするには、getElementById()やgetElementsByTagNameで対象となるエレメントを特定する。
エレメントのstyleオブジェクト内にスタイルシートの各プロパティがある。
スタイルシートのプロパティ名にはハイフンが含まれているものがあるが、ハイフンを削除し、直後の英文字を大文字にしたものがJavaScriptでのスタイルシートプロパティ名になる。

var ele = document.getElementById("contents");
ele.style.color = "red";	// 文字の色を赤色にする
ele.style.width = "320px";	// 単位付きで指定
ele.style.backgroundColor = "#ffa";
ele.style.fontSize = "10pt";

スタイルシートプロパティ値を読み出す

スタイルシートプロパティの値は単純にstyleオブジェクト内のプロパティを読み出しただけでは取得出来ない。
IEではcrrentStyleオブジェクト、他のブラウザではGetComputedStyle()で設定値を取得する。
ただし、得られる値はブラウザによってことなり互換性がない。このような場合はライブラリを使用する。

スタイルシートクラス名を設定する

JavaScriptで直接プロパティを操作するのは好ましくないため、スタイルシートクラス名を設定するようにする。
classNaneプロパティにあらかじめ定義されたクラス名を、追加、削除、入れ替えを行なう。
このようにする事でレイアウトが変更された場合でもスクリプトの修正を行なわずにすむ。

<style type="text/css">
.caution {
    color: red;
    background-color: #ffe;
}
</style>
<div id="contents">
aaa<br>
bbb<br>
ccc
</div>
<script type="text/javascript">
var ele = document.getElementById("contents");
ele.className = "caution";
</script>