前回の ノードを追加・置換・削除
においての、おまけの続き
##スタイルシートの操作
###インラインスタイルにアクセス styleプロパティ
HTMLのStyle属性にアクセスする方法。最も簡単にできるが、構造と装飾を分離するために、使いどころは考えなければいけない。
elem.style.prop = value
elem:要素オブジェクト prop:スタイルプロパティ value:設定値
例
elem.addEventListener('mouseover',function(){
this.style.backgroundColor = 'Red';
},false);
これは、<div style="background-color:red;">にしたと言うこと。
※スタイルプロパティはCSSと同じ書き方ではなく、「-」を取り除き、２文字目を大文字にする。（キャメルケース）
background-color → backgroundColor
主なスタイルプロパティ（多すぎるため少数の例）
| プロパティ | 概要 |
|---|---|
| border | 枠線全体 |
| borderColor | 枠線全体の色 |
| backgroundColor | 背景色 |
| textAlign | 行揃え |
| などなど |
###外部スタイルシートを適用する classNameプロパティ
外部スタイルシートに定義されたスタイルにアクセスするにはclassNameプロパティを使う。
elem.className = clazz
elem:要素オブジェクト clazz:スタイルクラス
例
.highlight {
background-color: red;
}
elem.addEventListener('mouseover',function(){
this.className = 'highlight';
},false);
cssで定義された.highlightをJSファイルで読み込んで、スタイルを変更している。
これにて ー完ー