概要

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

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

styleプロパティ

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

sample.js

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

たとえば、

sample.html

<div id="elem">マウスポインターを乗せると色が変わります</div>

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プロパティの役割です。

sample.js

elem.className[= clazz]
 //elem : 要素オブジェクト clazz : スタイルクラス

たとえば、

sample.html

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

style.css

.highlight {
 background-color : Yellow;
}

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プロパティには複数のクラスを関連づけることもできます。その場合は、

sample.js

this.className = 'clazz1, clazz2'

スタイルクラスを外す

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

sample.html

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

sample.js

document.addEventListener('DOMContentLoaded', function() {
 let elem = document.getElementById('elem')

 //クリックしたタイミングで背景色を変更
 elem.addEventListener('click', function() {
  this.className = (this.classNmae === 'highlight' ? '' : 'highlight')
 }, false)
}, false)

また、複数のスタイルクラスが適用されている場合は、

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;
}

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本格入門」

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

概要

styleプロパティ

classNameプロパティ

スタイルクラスを外す

classListプロパティ

参考資料