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

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

More than 1 year has passed since last update.

現象確認環境

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

上記環境で発生した現象

SVG要素に対して

svg.classList.add('active')

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

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

対処法

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

svg.classList.add の代わりに、

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

svg.classList.remove の代わりに

svg.setAttribute('class', '')

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

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

svg.className = 'active' ... ?

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

参考

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

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