类列表在 MS-Edge 中不起作用答案

【问题标题】：classList not working in MS-Edge类列表在 MS-Edge 中不起作用
【发布时间】：2017-09-28 07:21:09
【问题描述】：

我遇到了无法在 svg 元素上使用 javascript 的 classList 的问题。

我通过这段简单的代码复制了这个问题：

html

<svg viewBox="0 0 100 100">
<circle id="circle" r="40" cx="50" cy="50"></circle>
</svg>

css

.red{
  fill: red;
}

javascript

document.getElementById("circle").classList += "red";

我在互联网上找到了这张票，微软声明它已被修复； https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/1173756/。对我来说，情况似乎并非如此。

添加一个类是首选，但作为替代方法来更改元素属性（如在这种情况下填充）使用 javascript 的 svg 元素也足以作为答案。

最后说明：在真实情况下，我试图触发 CSS 动画，而不是背景颜色。

【问题讨论】：

classList 不是字符串...你需要document.getElementById("circle").classList.add('red'); ....在所有浏览器中（不仅仅是Edge）
更正，您的代码正在执行的操作在其他浏览器中确实有效并且等效于 document.getElementById("circle").classname += "red"; - 但如果元素已经有 class="blue" 这将导致 class="bluered" - 使用 .add，将最后以class="blue red"
@Jaromanda X 太棒了！这实际上似乎解决了这个问题。从现在开始，我将确保通过使用 classList.add() 来改进我的 javascripting。将其作为正式答案放入，我会接受。
尝试分配给className而不是classList

【解决方案1】：

元素类属性可以使用至少两种常用方法访问

element.className // a string

或

element.classList // a "DOMTokenList"

在其他浏览器中（至少目前是 Edge 除外），element.classList += "red" 实际上与 element.className += "red" 相同，如果元素还没有类，那很好

但是，如果你有

<element class="blue">

那么classList += "red" 和className += "red" 都会导致

<element class="bluered">

使用classList.add 方法可能是你想要的

<element class="blue">
element.classList.add('red')
<element class="blue red">

还有 classList.remove 和 classList.toggle，这使得使用类变得容易

【讨论】：