原生js添加一个或多个类名的方法分析

在使用JavaScript操作DOM元素时，我们经常需要对元素的类名进行操作，比如添加一个类名，删除一个类名，或者查询一个元素是否包含某个类名。本篇攻略将会解析原生JavaScript中添加一个或多个类名的方法。

使用Element.classList属性

在ES5之前，我们需要手动操作元素的className属性来处理类名，但是这样会很麻烦。在ES5中，Element类新增了一个classList属性，通过这个属性，我们可以很方便地对元素的类名进行操作。

添加一个类名

要给一个元素添加一个类名，我们可以使用Element.classList.add()方法。该方法接受一个字符串参数，表示要添加的类名。

示例代码如下：

var element = document.getElementById("myElement");

// 添加一个类名
element.classList.add("myClass");

添加多个类名

如果要添加多个类名，我们可以在add()方法中传入多个参数，每个参数表示一个类名。

示例代码如下：

var element = document.getElementById("myElement");

// 添加多个类名
element.classList.add("myClass1", "myClass2", "myClass3");

判断一个元素是否包含某个类名

要判断一个元素是否包含某个类名，我们可以使用Element.classList.contains()方法。该方法接受一个字符串参数，表示要判断的类名。如果元素包含该类名，返回true，否则返回false。

示例代码如下：

var element = document.getElementById("myElement");

// 判断元素是否包含某个类名
if (element.classList.contains("myClass")) {
    console.log("元素包含myClass类名");
}

删除一个类名

要删除一个元素的类名，我们可以使用Element.classList.remove()方法。该方法接受一个字符串参数，表示要删除的类名。

示例代码如下：

var element = document.getElementById("myElement");

// 删除一个类名
element.classList.remove("myClass");

删除多个类名

如果要删除多个类名，我们可以在remove()方法中传入多个参数，每个参数表示一个类名。

示例代码如下：

var element = document.getElementById("myElement");

// 删除多个类名
element.classList.remove("myClass1", "myClass2", "myClass3");

使用Element.className属性

虽然classList属性很方便，但是它不支持太老的浏览器（比如IE9以下），为了兼容老浏览器，我们可以使用Element.className属性进行类名操作。

添加一个类名

要给一个元素添加一个类名，我们可以使用Element.className属性，在原来的类名后面添加一个空格和要添加的类名。

示例代码如下：

var element = document.getElementById("myElement");

// 添加一个类名
element.className += " myClass";

添加多个类名

如果要添加多个类名，我们需要一个一个地追加类名，每个类名都要添加一个空格。

示例代码如下：

var element = document.getElementById("myElement");

// 添加多个类名
element.className += " myClass1";
element.className += " myClass2";
element.className += " myClass3";

判断一个元素是否包含某个类名

要判断一个元素是否包含某个类名，我们可以使用Element.className属性获取元素的类名，然后使用字符串的indexOf()方法查找要判断的类名。如果找到了，说明元素包含该类名。

示例代码如下：

var element = document.getElementById("myElement");

// 判断元素是否包含某个类名
if (element.className.indexOf("myClass") !== -1) {
    console.log("元素包含myClass类名");
}

删除一个类名

要删除一个元素的类名，我们可以使用Element.className属性，将要删除的类名从className字符串中移除。

示例代码如下：

var element = document.getElementById("myElement");

// 删除一个类名
element.className = element.className.replace("myClass", "");
// 如果要移除多个类名，可以使用正则表达式
// element.className = element.className.replace(/myClass1|myClass2|myClass3/g, "");

至此，我们就完成了添加一个或多个类名的方法分析，希望对你有所帮助。