JS动态添加样式类名
className
元素.className = '类名'，使用className添加类名，会将其他类名所删除，只剩下添加的这个类名
<body><div class="nav">123div><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，没有就返回 falseconsole.log(box.classList.contains('box')) // truescript>
body>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！