classList 在 MS-Edge 中不起作用

Question

我遇到了无法在 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";

我在 Internet 上找到了这张票据，Microsoft 说它已修复； https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/1173756/。对我来说似乎并非如此。

添加 class 是首选，但也可以使用一种变通方法来更改元素属性（例如在这种情况下填充）with javascript svg元素也足以作为答案。

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

Answer 1

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

element.className // a string

或

element.classList // a "DOMTokenList"

在其他浏览器中（至少目前除了 Edge），element.classList += "red" 实际上与 element.className += "red" 相同，如果元素还没有 class [=20] =]

但是，如果你有

<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，这使得使用 classes 变得容易

classList not working in MS-Edge