原生JS添加类名删除类名

最新推荐文章于 2023-12-29 16:58:34 发布

原创最新推荐文章于 2023-12-29 16:58:34 发布 · 1.8k 阅读

CC 4.0 BY-SA版权

13 篇文章

订阅专栏

本文介绍了如何使用JavaScript操作HTML中的<div>元素，包括添加和删除类，检查元素是否存在，以及如何正确使用jQuery进行元素判断。通过具体代码示例，读者可以快速掌握这些技巧。

为 <div> 元素添加 class:

document.getElementById("myDIV").classList.add("mystyle");

为 <div> 元素添加多个类:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

为 <div> 元素移除一个类:

document.getElementById("myDIV").classList.remove("mystyle");

为 <div> 元素移除多个类:

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

检查是否含有某个CSS类

myDiv.classList.contains('myCssClass'); //return true or false

检查页面是否包含某个元素

if(document.getElementById("p1")) {
    console.log("p1存在");
} else {
    console.log("p1不存在");
}

注意：

在使用jquery时，判断页面是否包含某个元素，应该使用下面写法：

if($("#p11").length > 0) {
    console.log("p1存在");
} else {
    console.log("p1不存在");
}

而不是：

if($("#p11")) {
    console.log("p1存在");
} else {
    console.log("p1不存在");
}

如果使用后面的写法，无论页面是否包含id为p11的元素，都打印“p1存在”。

原因：$("#p11")是一个对象，数据类型为object。

当页面存在这个元素时，打印结果如下

当页面元素不存在时，打印结果如下：

原生JS添加类名 删除类名