【IE11】undefinedになるsvg.classListへの対処方法

3184 ワード
InternetExplorer JavaScript IE SVG JavaScript テキストリンク

現象確認環境

  • Windows 10
  • IE11 （見てないですが、IE10以下もダメでしょうね）

上記環境で発生した現象

SVG要素に対して

svg.classList.add('active')

などすると、 未定義または NULL 参照のプロパティ は取得できません と怒られる。

このとき、svg.classListは常に undefined であり、undefined なので もちろんクラスを付けることも、外すこともできない

対処法

クラス（classList）ではなく、属性（attribute)を操作してやればよいです。

svg.classList.add の代わりに、

svg.setAttribute('class', 'active')

svg.classList.remove の代わりに

svg.setAttribute('class', '')

class="" の中身をごそっと書き換えてしまうので、対象の svg がマルチクラスである場合は少し注意が必要ですが、概ねこのようにすると良いですね

マルチクラスの場合に詰まった時は、参考のリンクまで足をお運び下さい。

svg.className = 'active' ... ?

これはChromeでもダメでした。svg の場合 className は read only だそうです。

参考

Thank you
https://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass