如何使用JavaScript添加class名

发布时间：2023-05-20

在web开发中，经常需要通过JavaScript来操作DOM元素。其中，添加class名是比较常见的一种操作。下面我们将从几个方面详细阐述如何使用JavaScript添加class名。

一、使用jQuery添加class名

$(selector).addClass(className);

jQuery提供了一个addClass()方法，可以非常方便地给指定元素添加class名。其中，selector是CSS选择器，className是要添加的class名。以下是一个示例：

<div id="demo"></div>

$(document).ready(function(){
  $("#demo").addClass("center");
});

上面的示例中，在页面加载完成后，jQuery会选中id为demo的元素，并添加名为center的class。

二、使用原生JavaScript删除class名

element.classList.remove(className);

如果需要使用原生JavaScript来删除某个元素的class，可以使用classList.remove()方法。其中，element是要删除class的元素，className是要删除的class名。以下是一个示例：

<div id="demo" class="center"></div>

var demo = document.getElementById("demo");
demo.classList.remove("center");

上面的示例中，先通过getElementById()方法获取id为demo的元素，然后使用classList.remove()方法删除该元素的名为center的class。

三、使用原生JavaScript添加class名

element.classList.add(className);

与删除class不同，原生JavaScript早期是没有提供添加class名的方法的。不过，现代浏览器都支持classList.add()方法，可以很方便地给元素添加class。以下是一个示例：

<div id="demo"></div>

var demo = document.getElementById("demo");
demo.classList.add("center");

上面的示例中，在页面加载完成后，先通过getElementById()方法获取id为demo的元素，然后使用classList.add()方法添加名为center的class。

四、使用jsclass添加属性

js.class('className')(element);

jsclass是一个轻量级的JavaScript库，提供了许多操作DOM元素的功能。它比jQuery更轻量级，同时也不失灵活性。以下是一个示例：

<div id="demo"></div>

js.class('center')(document.getElementById('demo'));

上面的示例中，先使用js.class()方法创建一个名为center的class，然后使用document.getElementById()方法获取id为demo的元素并添加该class。

五、使用原生JavaScript添加删除类名

element.className = "class1 class2";

在早期的JavaScript中，添加和删除class名的方法是直接操作元素的className属性。通过对该属性进行赋值来达到添加和删除class名的目的。以下是一个示例：

<div id="demo" class="class1"></div>

var demo = document.getElementById("demo");
demo.className = "class2";

上面的示例中，先通过getElementById()方法获取id为demo的元素，然后将其className属性直接赋值为class2，以删除原有的class1并添加新的class2。

六、使用JavaScript给元素添加class

element.setAttribute("class", className);

除了直接操作className属性以外，还可以使用setAttribute()方法来添加class。其中，element是要添加class的元素，className是要添加的class名。以下是一个示例：

<div id="demo"></div>

var demo = document.getElementById("demo");
demo.setAttribute("class", "center");

上面的示例中，在页面加载完成后，先通过getElementById()方法获取id为demo的元素，然后使用setAttribute()方法添加名为center的class。

七、使用JavaScript给元素添加active类名

element.classList.toggle("active");

在一些交互的场景中，需要给元素动态添加或删除class名。比如，点击某个元素后，需要给该元素添加active类名。此时，可以使用classList.toggle()方法实现。以下是一个示例：

<div id="demo">点击我</div>

var demo = document.getElementById("demo");
demo.onclick = function() {
  this.classList.toggle("active");
}

上面的示例中，使用demo的onclick事件来控制点击时添加或删除active类名。当demo元素没有active类名时，点击后会添加该名称；当已经有active类名时，点击后会删除该名称。

八、使用JavaScript改变class名

element.classList.replace(oldClass, newClass);

在一些场景中，需要动态地改变一个元素的class名。此时，可以使用classList.replace()方法实现。其中，element是要改变class名的元素，oldClass是要替换的旧class名，newClass是要替换成的新class名。以下是一个示例：

<div id="demo" class="class1"></div>

var demo = document.getElementById("demo");
demo.classList.replace("class1", "class2");

上面的示例中，先通过getElementById()方法获取id为demo的元素，然后使用classList.replace()方法将所有class1替换成class2。 通过以上几种方式，我们可以很方便地使用JavaScript添加class名。不同的方法适用于不同的场景，需要根据具体情况选择使用哪一种方法。

推荐文章