一、
本人理解是对元素上的class属性进行操作
格式 标签.classList.方法（）
// 重点 ！！！
//classList:操作类（标签上的class属性）名
//length：返回指定元素的类型的个数
//add（）:给指定元素添加指定的类名
//remove（）:移除指定元素的指定的类名
//toggle（）:切换指定元素的指定的类名，有则移除。无测添加
//item（） 根据序号获取对应的类名
//contains（）:判断指定元素是否含有指定的类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box2{
color: red;
}
</style>
<body>
<div class="box main top nav">盒子</div>
<!-- classList 只对类别有效 针对类别的方法 -->
<script>
// 重点 ！！！
//classList:操作类（标签上的class属性）名
//length：返回指定元素的类型的个数
//add（）:给指定元素添加指定的类名
//remove（）:移除指定元素的指定的类名
//toggle（）:切换指定元素的指定的类名，有则移除。无测添加
//item（） 根据序号获取对应的类名
//contains（）:判断指定元素是否含有指定的类名
var box1=document.querySelector(',box');
console.dir(box1);
console.log(box1.classList.length);
box1.classList.add('box2')
box1.classList.add('box2','info')
box1.classList.remove('top')
box.classList.toggle('nav') //移除 （有则移除）
box1.classList.toggle('list')//添加 （无测添加）
//根据指定的序号来获取类
console.log(box1.classList.item(0))
//进行判断该标签上的类是否有这个类名
console.log(box1.classList.contains('main'))//true
console.log(box1.classList.contains('qwe'))//false
</script>
</body>
</html>
扫一扫
3135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
