一、原生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() 方法。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/298203.html
微信扫一扫 
支付宝扫一扫 