SVG Element.classList 属性

SVG元素的.classList属性用于操作元素的类名列表。它的行为类似于HTML元素的classList属性，但是它具有一些额外的特性，因为SVG元素可以包含在HTML文档中，也可以独立使用。

语法

let classes = element.classList;

返回值

返回一个DOMTokenList对象，其中包含元素的类名列表。

方法

add()

添加一个或多个类名到元素的类名列表中。如果类名已经存在，则不会重复添加。

语法：

element.classList.add(class1 [, class2, ...]);

remove()

从元素的类名列表中移除一个或多个类名。

语法：

element.classList.remove(class1 [, class2, ...]);

contains()

检查元素的类名列表中是否包含指定的类名，并返回一个布尔值。

语法：

element.classList.contains(class);

toggle()

在元素的类名列表中切换指定类名的状态。

如果元素的类名列表中存在指定的类名，则该类名将被移除，并返回false。如果元素的类名列表中不存在指定的类名，则该类名将被添加，并返回true。

如果只提供一个参数，则在该参数存在和不存在之间切换。

如果提供第二个参数，则它将用于指示是否强制添加或移除类名。

语法：

element.classList.toggle(class [, force]);

item()

根据其在类名列表中的索引返回一个类名。

语法：

element.classList.item(index);

replace()

用一个新的类名替换类名列表中的某个类名。

语法：

element.classList.replace(oldClass, newClass);

示例

<svg>
  <rect id="myRect" class="rectClass"></rect>  
</svg>
<script>
  var rect = document.getElementById("myRect");
  
  rect.classList.add("newClass");        // 添加新类名
  rect.classList.remove("rectClass");   // 移除旧类名
  console.log(rect.classList.contains("newClass"));   // 返回 true 
  console.log(rect.classList.contains("rectClass"));  // 返回 false
</script>

参考文献

• SVG Element.classList
• DOMTokenList