原生js封装添加class,删除class的实例

原生js封装添加class的实例

准备工作

首先，我们需要创建一个名为addClass的函数，该函数接受两个参数：element（要添加class的元素）和className（要添加的class名称）。

实现步骤

以下是实现添加class的步骤：

1. 使用document.querySelector方法获取要添加class的元素。
2. 使用element.classList.add方法将指定的class名称添加到元素的class列表中。

示例代码如下：

function addClass(element, className) {
  var targetElement = document.querySelector(element);
  targetElement.classList.add(className);
}

使用示例

以下是使用封装的添加class函数的示例：

示例一：

假设我们有一个按钮的HTML代码如下：

<button id="myButton">点击我</button>

我们可以通过以下代码，为按钮添加一个名为active的class：

addClass('#myButton', 'active');

示例二：

假设我们有一个div元素的HTML代码如下：

<div id="myDiv">这是一个div元素</div>

我们可以通过以下代码，为该div元素添加一个名为highlight的class：

addClass('#myDiv', 'highlight');

原生js封装删除class的实例

准备工作

同样地，我们需要创建一个名为removeClass的函数，该函数接受两个参数：element（要删除class的元素）和className（要删除的class名称）。

实现步骤

以下是实现删除class的步骤：

1. 使用document.querySelector方法获取要删除class的元素。
2. 使用element.classList.remove方法从元素的class列表中删除指定的class名称。

示例代码如下：

function removeClass(element, className) {
  var targetElement = document.querySelector(element);
  targetElement.classList.remove(className);
}

使用示例

以下是使用封装的删除class函数的示例：

示例一：

假设我们有一个按钮的HTML代码如下：

<button id="myButton" class="active">点击我</button>

我们可以通过以下代码，从按钮中删除名为active的class：

removeClass('#myButton', 'active');

示例二：

假设我们有一个div元素的HTML代码如下：

<div id="myDiv" class="highlight">这是一个div元素</div>

我们可以通过以下代码，从该div元素中删除名为highlight的class：

removeClass('#myDiv', 'highlight');

以上就是使用原生js封装添加class和删除class的实例的完整攻略。您可以根据自己的需求，在项目中使用这些封装的函数来轻松操作class。