css class 操作最佳方案

2023-09-27 19:35:35

CSS 类操作的最佳方案

在 JavaScript 中操作 CSS 类有几种方法，包括使用 classList、className 和 join(' ')。每种方法都有其优缺点，选择最佳方法取决于具体情况。

classList

classList 是一个 DOM 属性，它允许您以编程方式添加、删除和切换 CSS 类。classList 的主要优点是它非常简单易用。例如，要添加一个名为 "active" 的类，您可以使用以下代码：

element.classList.add("active");

要删除一个名为 "active" 的类，您可以使用以下代码：

element.classList.remove("active");

要切换一个名为 "active" 的类，您可以使用以下代码：

element.classList.toggle("active");

className

className 是一个 DOM 属性，它存储元素的类属性。className 的主要优点是它非常快速。例如，要添加一个名为 "active" 的类，您可以使用以下代码：

element.className += " active";

要删除一个名为 "active" 的类，您可以使用以下代码：

element.className = element.className.replace(" active", "");

要切换一个名为 "active" 的类，您可以使用以下代码：

if (element.className.indexOf(" active") !== -1) {
  element.className = element.className.replace(" active", "");
} else {
  element.className += " active";
}

join(' ')

join(' ') 是一个 JavaScript 方法，它可以将数组中的元素连接成一个字符串。join(' ') 的主要优点是它非常灵活。例如，要添加一个名为 "active" 的类，您可以使用以下代码：

element.className = element.className.split(' ').concat("active").join(' ');

要删除一个名为 "active" 的类，您可以使用以下代码：

element.className = element.className.split(' ').filter(function(className) {
  return className !== "active";
}).join(' ');

要切换一个名为 "active" 的类，您可以使用以下代码：

if (element.className.indexOf(" active") !== -1) {
  element.className = element.className.split(' ').filter(function(className) {
    return className !== "active";
  }).join(' ');
} else {
  element.className = element.className.split(' ').concat("active").join(' ');
}