IE で クラスをtoggleさせるには

はじめに

以前、classList でクラスを操作する覚書をしたが、IE ではそのうちのtoggle() が使えない沼に一瞬だけハマった。

解決方法

classList の.add() と .remove() 、そして contains() をうまく使えば解決する。

// HTML
<p class="togglclassBtn">click me!</p>
<p class="change_color">HELLO!</p>

// SCSS
.togglclassBtn {
  display:inline-block;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  background-color: #EF5350;
  color: #FFFFFF
}
.change_color {
  display:inline-block;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  background-color: #FFFFFF;
  &.js-active {
    background-color: #1976D2;
    color: #ffffff;
  }
}

// JavaScript
const btn = document.querySelector('.togglclassBtn');
const target = document.querySelector('.change_color');

btn.addEventListener('click', function() {
  if(target.classList.contains('js-active')) {
    target.classList.remove('js-active')
  } else {
    target.classList.add('js-active')
  }
})

See the Pen toggleClass by IE by PROGBLOG (@progblog-sank) on CodePen.

IE で動作確認は上記をダウンロードする。