className
元素.className = '类名'，使用className添加类名，会将其他类名所删除，只剩下添加的这个类名
<body>
<div class="nav">123</div>
<script>
// 1. 获取元素
const div = document.querySelector('div')
// 2.添加类名 class 是个关键字 我们用className
// 添加box类，但由于本身也有一个nav类，使用空格隔开可以一起添加，不会导致样式被删除
div.className = 'nav box'
</script>
</body>
classList
classList.add(‘类名’)
元素.classList.add('类名')，在其他类名的基础上，在添加一个类名
<body>
<div class="box">文字</div>
<script>
// 通过 classList 添加
// 1. 获取元素
const box = document.querySelector('.box')
// 2 追加类 add() 类名不加点，并且是字符串
box.classList.add('active')
</script>
</body>
classList.remove(‘类名’)
元素.classList.toggle('类名')，删除指定类名
<body>
<div class="box">文字</div>
<script>
// 通过 classList 添加
// 1. 获取元素
const box = document.querySelector('.box')
// 2. 删除类 remove() 类名不加点，并且是字符串
box.classList.remove('box')
</script>
</body>
classList.toggle(‘类名’)
元素.classList.toggle('类名')，如果有这个类名就添加，没有就删除
<body>
<div class="box">文字</div>
<script>
// 通过 classList 添加
// 1. 获取元素
const box = document.querySelector('.box')
// 2. 切换类 toggle() 有还是没有 有就删掉，没有就加上
box.classList.toggle('box')
</script>
</body>
classList.contains(‘类名’)
元素.classList.contains('类名')，看看有没有包含某个类名，如果有则返回true，么有则返回false
<body>
<div class="box">文字</div>
<script>
// 通过 classList 添加
// 1. 获取元素
const box = document.querySelector('.box')
// 2 contains() 有就返回 ture，没有就返回 false
console.log(box.classList.contains('box')) // true
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
