<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> #demo { 100px; height: 100px; background-color: pink; } .box { border: 1px solid blue; } .text { color: red; } </style> </head> <body> <div id="demo" class="box text one">测试</div> <script> const demo = document.getElementById('demo') // // demo.className += ' one' // demo.className = 'box' // demo.classList.add('one') // 在原来类名的基础上,添加一个新的类名 // demo.classList.remove('text') // 在原来的基础上,删除一个类名 // demo.classList.toggle('one') // 在原来的基础上,判断这个类名本来是否存在.如果存在就移除掉,如果不存在就加上 </script> </body> </html>