H5中的class操作(classList)

最新推荐文章于 2022-10-09 21:15:15 发布

李常常查德

最新推荐文章于 2022-10-09 21:15:15 发布

阅读量2.2k

点赞数

分类专栏：个人总结文章标签： H5

本文链接：https://blog.csdn.net/qq_36330972/article/details/88858323

版权

个人总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

h5的class操作

引言:

jquery操作类的基本操作:addclass、removeClass、toggleClass、hasClass

h5中也引申出来了类似的api，dom.classList方法可以获取到这个dom元素的类的对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>utf-8</title>

	<link rel="stylesheet" href="./css/index.css">
</head>
<body>
	<div id = "a" class = "cla1 cla2">
        我是一个div而已
    </div>
    <script>
        var dom = document.querySelector("#a");
        console.log(dom.classList);
    </script>
</body>
</html>

在这里插入图片描述

这是返回的一个对象，可以发现我们需要的类名都出现了。他是一个对象，有着很多方法。图上的方法就是类似于jquery的几个方法

var dom = document.querySelector("#a");
dom.classList.add('newClass');
//添加类newClass

dom.classList.remove('cla1');
//删除类cla1

dom.classList.contains('cla1');
//判断是否有这个类

dom.classList.toggle('toggle')
//如果没有这个类，就加上，有这个类，就去掉。

最后

在学习前端的过程中，虽然使用jquery可以让自己写代码非常舒服，但是在实际工作中，jquery可能显得有些笨重，需要多学习学习其他的方法来尽量替代掉jquery！

李常常查德

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5中的class操作(classList)

h5的class操作引言: jquery操作类的基本操作:addclass、removeClass、toggleClass、hasClass h5中也引申出来了类似的api，dom.classList方法可以获取到这个dom元素的类的对象<!DOCTYPE html><html lang="en"><head> <meta charset...
复制链接

扫一扫