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

Last updated at 2018-07-12Posted at 2017-07-26

現象確認環境

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 がマルチクラスである場合は少し注意が必要ですが、概ねこのようにすると良いですね

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

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