CSSのClassをJavascriptで動的に適用する方法

cssをjavascriptで変更したくて色々調べていたら良いサイトを発見

指定したidに使用したいclassを適用できます。

引用、参考サイト

Class属性をJavaScriptで動的に切り替える （setElementClassById） - youmos

以下引用です。

CSSのスタイルの記述

.image_left{
float:left;
margin:0px 10px 10px 0px;
}
.image_right{
float:right;
margin:0px 0px 10px 10px;
}


JavaScriptでclass属性の変更処理

// class要素の追加・変更
function setElementClassById(elem, value) {
if(document.getElementById) {
var obj = document.getElementById(elem);
if(obj) {
obj.className = value;
}
}
}


変更したい部分のHTML

<img src="image/hoge.jpg" id="img_main" />


画像のimg要素にあらかじめ id を指定しておく、後はsetElementClassById('id名称','変更後のクラス名称') の呼び出しを、onClick等で行うことで部分的なデザインの入れ替えが可能になる。