代码之家  ›  专栏  ›  技术社区  ›  Rob Monhemius

类列表在MS Edge中不工作

  •  0
  • Rob Monhemius  · 技术社区  · 9 年前

    我遇到了一个问题,无法在svg元素上使用javascript的类列表。

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

    html

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

    .red{
      fill: red;
    }
    

    javascript

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

    https://jsfiddle.net/gqckv029/

    我在互联网上发现了这张罚单,微软说它已经被修复了; https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/1173756/ . 对我来说似乎不是这样。

    使用javascript svg元素的属性也足以作为答案。

    最后注意:在真实情况下,我试图触发css动画,而不是背景色。

    1 回复  |  直到 9 年前
        1
  •  3
  •   Jaromanda X    9 年前

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

    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">
    

    还有一个类列表。删除和类列表。切换,使类的工作更容易