详解用JS添加和删除class类名

关于详解用JS添加和删除class类名的完整攻略，我来给您详细讲解一下。

添加class类名

使用classList属性

为一个元素添加class类名，可以使用该元素的classList属性，并调用其add()方法。

下面是一个添加class类名的示例：

<div id="myDiv">Hello World!</div>

// 选择需要添加class类名的元素
const myDiv = document.querySelector('#myDiv');

// 向元素添加class类名
myDiv.classList.add('myClass');

这段代码会向id为myDiv的元素添加一个名为myClass的class类名。

使用className属性

classList属性是在IE10才开始支持的，如果需要兼容IE9及更早的版本，可以使用元素的className属性来添加class类名。需要注意的是，使用className属性方式添加class类名，会直接替换掉原有的class类名。

下面是一个使用className属性添加class类名的示例：

<div id="myDiv" class="oldClass">Hello World!</div>

// 选择需要添加class类名的元素
const myDiv = document.querySelector('#myDiv');

// 向元素添加class类名
myDiv.className += ' myClass';

这段代码会向id为myDiv的元素添加一个名为myClass的class类名，并且原有的oldClass类名将被替换。

删除class类名

使用classList属性

为一个元素删除class类名，可以使用该元素的classList属性，并调用其remove()方法。

下面是一个删除class类名的示例：

<div id="myDiv" class="myClass">Hello World!</div>

// 选择需要删除class类名的元素
const myDiv = document.querySelector('#myDiv');

// 向元素删除class类名
myDiv.classList.remove('myClass');

这段代码会从id为myDiv的元素中删除名为myClass的class类名。

使用className属性

className属性同样可以用来删除class类名，只需直接修改该属性即可。

下面是一个使用className属性删除class类名的示例：

<div id="myDiv" class="myClass">Hello World!</div>

// 选择需要删除class类名的元素
const myDiv = document.querySelector('#myDiv');

// 向元素删除class类名
myDiv.className = '';

这段代码会从id为myDiv的元素中删除所有的class类名。

这就是详解用JS添加和删除class类名的完整攻略，希望对您有帮助。