初心者による JavaScriptで行うスタイルシートの操作

#概要
javascriptを用いることで、DOM操作からスタイルシートを操作できます。DOMでスタイルシートを操作するには、以下のアプローチがあります。

1. インラインスタイルにアクセスする(styleプロパティ)
2. 外部のスタイルシートを適用する(classNameプロパティ)

#styleプロパティ
javascriptでスタイルを操作するのに最もシンプルなのが、　インラインスタイルに対してアクセスする方法です。インラインスタイルとは、個々の要素に対して設定されたスタイルのことです。

```javascript:sample.js
elem.style.prop[= value]
 //elem : 要素オブジェクト prop : スタイルプロパティ value : 設定値
```

たとえば、
 
```html:sample.html
<div id="elem">マウスポインターを乗せると色が変わります</div>
```

```javascript:sample.js
document.addEventListener('DOMContentLoaded', function() {
 let elem = document.getElementById('elem')

 //マウスポインターが乗ったタイミングで背景色を変更
 elem.addEventListener('mouseover', function() {
  this.style.backgroundColor = 'Yellow'
 }, false)

 //マウスポインターが外れたタイミングで背景色を戻す
 elem.addEventListener('mouseout', function() {
  this.style.backgroundColor = ''
 }, false)
}, false)
```
イベントリスナーの元では、thisはイベントの発生元を指している。
スタイルプロパティ名には注意が必要です。JavaScriptでは、「ハイフンを取り除いたうえで、２単語目以降の頭文字は大文字とする」必要があります。

```
background-color : backgroundColor
border-top-style : borderTopStyle
```

ただし、floatはstyleFloatとなる。

#classNameプロパティ
styleプロパティは確かにシンプルだが、javascriptコードの中にCSSのコードが混在してしてしまうため、やはりCSSのコードは別にすることが望ましい。外部スタイルシートで定義されたスタイルにアクセスするのは、classNameプロパティの役割です。

```javascript:sample.js
elem.className[= clazz]
 //elem : 要素オブジェクト clazz : スタイルクラス
```
たとえば、

```html:sample.html
<link rel="stylesheet" href="css/style.css" />
//コード
<div id="elem">マウスポインターを乗せると色が変わります</div>
```

```css:style.css
.highlight {
 background-color : Yellow;
}
```

```javascript:sample.js
document.addEventListener('DOMContentLoaded', function() {
 let elem = document.getElementById('elem')
 //マウスポインターが乗ったタイミング
 elem.addEventListener('mouseover', function() {
  this.className = 'highlight'
 }, false)
 elem.addEventListener('mouseout', function() {
  this.className = ''
 }, false)
}, false)
```
このようにすることによって、編集がしやすくなります。また、classNameプロパティには複数のクラスを関連づけることもできます。その場合は、

```javascript:sample.js
this.className = 'clazz1, clazz2'
```

##スタイルクラスを外す
classNameプロパティを利用して、特定のスタイルクラスを着脱することができます。

```html:sample.html
<link rel="stylesheet" href="css/style.css" />
//コード
<div id="elem">クリックすると背景色が変わります</div>
```

```javascript:sample.js
document.addEventListener('DOMContentLoaded', function() {
 let elem = document.getElementById('elem')

 //クリックしたタイミングで背景色を変更
 elem.addEventListener('click', function() {
  this.className = (this.classNmae === 'highlight' ? '' : 'highlight')
 }, false)
}, false)
```
また、複数のスタイルクラスが適用されている場合は、

```html:sample.html
<link rel="stylesheet" href="css/style.css" />
//コード
<div id="elem" class="line">クリックすると背景色が変わります</div>
```

```css.style.css
.highlight {
 background-color: Yellow;
}

.line {
 border: 1px solid Red;
}
```

```javascript:sample.js
document.addEventListener('DOMContentLoaded', function() {
 let elem = document.getElementById('elem')

 elem.addEventListener('click', function() {
  //空白区切りの文字列を分割
  let classes = this.className.splite(' ')
  //highlightが存在する位置を検出
  let index = classes.indexOf('highlight')
  if(index === -1){
   //存在しなければ、動的に追加
   classes.push('highlight')
  }else{
   //存在する場合には、highlightを除名
   classes.splice(index, 1)
  }
  //配列を空白入りの文字列に
  this.className = classes.join(' ')
 }, false)
}, false)
```

#classListプロパティ
classListプロパティを利用することで、class属性の値をDOMTokenListオブジェクトとして取得する。classListでは、

```
length : リストの長さ
item(index) : インデックス番目のクラスを取得
contain(clazz) : 指定したクラスがあるかどうか
add(clazz) : リストにクラスを追加
remove(clazz) : リストのクラスを削除
toggle(clazz) : クラスのオン/オフを切り替え
```
toggleを用いることで、条件演算子が不要になる。コードが直感的になる。

#参考資料
山田祥寛様　「javascript本格入門」