Class属性をJavaScriptで動的に切り替える （setElementClassById）
JavaScriptを利用して動的にstyle属性値を変更することができる。しかし、折角スタイルシート（CSS）があるのに、JavaScript中で動的なstyle変更をしてしまうと、デザイン修正の際に不便になる。良質なサイトを作る上で、コードの記述にも気を使いたい。
作成するJavaScriptコードは汎用的に作成しておくことで、いろいろな場面で利用できるようにしておく。
上の画像をクリックすると、class属性の変更とともに、適用するstyleが変更されるようになる。
実際の記述例は以下のようになる。
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等で行うことで部分的なデザインの入れ替えが可能になる。
class属性を切り替えることで、JavaScript x StyleSheet を組み合わせた応用の幅が広がるので是非試していただきたい。
サイトの最新情報をRSSで受信できます
- 関連記事 リスト
簡単にブラウザ別CSSを導入するJavaScript
特定のブラウザで表示したときにレイアウトが崩れたりする場合がある。CSS-Ha...続きを読む
Class属性をJavaScriptで動的に切り替える
JavaScriptを利用して動的にstyle属性値を変更することができる。しか...続きを読む
CSSとJavaScriptでmin-width max-width を実装する
CSSでmin-width max-width をそれぞれ行うことで、コンテナの...続きを読む
Step by Stepで覚えるCSSチュートリアル
Webページを作る際に、スキルアップしながらCSSも覚えたい。 そんな方に役に...続きを読む
HTML+CSSタグをすぐに確認できるリファレンス
HTMLタグやCSSを作成しているときに、うまく表示できないコードがあり調べて...続きを読む
CSS最適化でサイト読込みを早くする
ブログの登場でCSSでデザインを構築していくのが主流になっているが、ファイルサ...続きを読む
