原生js添加类名-从多个方面进行详细阐述

发布时间：2023-05-17

一、原生js添加类名不覆盖原有类名

const element = document.getElementById("example");
element.classList.add("new-class");

在添加新的类名之前，我们可以检查元素上是否已经有这个类名。 首先，我们确保元素存在，然后我们可以检查类名，并根据情况添加。

const element = document.getElementById("example");
if (!element.classList.contains("new-class")) {
  element.classList.add("new-class");
}

二、原生js增加类名

const element = document.getElementById("example");
element.className += " new-class";

使用此方法时需要注意，必须添加空格，否则类名将合并在一起。

三、js给元素添加类名

const element = document.createElement('div');
element.classList.add('new-class');

我们可以使用 createElement() 方法创建新的元素，然后使用 classList.add() 方法向其添加类名。

四、js添加类名的方法

const element = document.getElementById("example");
element.setAttribute("class", "new-class");

我们可以使用 setAttribute() 方法来添加类名，在这种情况下，元素的 class 属性将被替换。

五、原生js添加css样式

const element = document.getElementById("example");
element.style.color = "red";

我们可以使用样式属性直接将 CSS 样式应用于元素，而不是通过 CSS 类添加它们。

六、原生js删除类名

const element = document.getElementById("example");
element.classList.remove("old-class");

我们可以使用 classList.remove() 方法从元素中删除类名。

七、js点击添加类名

const element = document.getElementById("example");
element.addEventListener("click", function() {
  element.classList.toggle("active");
});

在单击该元素时，我们可以使用 classList.toggle() 方法向其添加/删除类名。

八、js里添加类名

const element = document.getElementById("example");
element.className = "old-class new-class";

我们可以通过改变 className 属性，直接在 JS 中向元素添加类名。

九、js动态添加类名

const element = document.getElementById("example");
const newClass = "new-class";
element.classList.add(newClass);

如果我们需要在运行时动态地添加类名，我们可以将类名存储在变量中，并将其传递给 classList.add() 方法。

推荐文章