代码:
<!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> .box { width: 300px; height: 300px; background-color: pink; } .active { background-color: greenyellow; border-radius: 50%; } </style> </head> <body> <div class="box"></div> <script> // 提前定义好样式 // JS负责 添加类名 或 删除类名 修改样式 let div = document.querySelector('div') // 添加一个类 div.classList.add('active') // 删除一个类 div.classList.remove('active') // 切换一个类(存在则删除,不存在则添加) div.classList.toggle('active') </script> </body> </html>
效果图:
06-05
7022
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交