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>

H5中的class操作(classList)

这是返回的一个对象，可以发现我们需要的类名都出现了。他是一个对象，有着很多方法。图上的方法就是类似于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！

H5中的class操作(classList)

h5的class操作

引言:

最后

相关推荐