Help us understand the problem. What is going on with this article?

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

概要

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

  1. インラインスタイルにアクセスする(styleプロパティ)
  2. 外部のスタイルシートを適用する(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では、「ハイフンを取り除いたうえで、2単語目以降の頭文字は大文字とする」必要があります。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away