Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?
@mtmtkzm

【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

8
Help us understand the problem. What is going on with this article?
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
mtmtkzm
はじめまして、ライダーです。LIGブログでも記事を書いています。 https://liginc.co.jp/author/rider
liginc
上野でウェブ制作を行うクリエイティブ集団です。HP制作、プロモーション、システム開発等を行っています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
8
Help us understand the problem. What is going on with this article?