<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .class1{ width: 100px; height: 100px; background: red; } .class2{ border: 10px solid #000; } </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <script> $(function() { /*1.addClass(class|fn)
作用: 添加一个类
如果要添加多个, 多个类名之间用空格隔开即可
2.removeClass([class|fn])
作用: 删除一个类
如果想删除多个, 多个类名之间用空格隔开即可
3.toggleClass(class|fn[,sw])
作用: 切换类
*/ var btns=document.getElementsByTagName("button"); btns[0].onclick=function() { $("div").addClass("class1 class2"); } btns[1].onclick=function() { $("div").removeClass("class2 class1"); } btns[2].onclick=function() { $("div").toggleClass("class2 class1"); //有就消失(有的话,相当于删除功能把),没有就出现(添加) } }); </script> <button>添加类</button> <button>删除类</button> <button>切换类</button> <div></div> </body> </html>
jQuery第十七篇 操作类相关的方法
关注
打赏
