<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="d1">divdivdiividiviiddv</div> <input type="button" id="add_class" value="添加class" /> <input type="button" id="del_class" value="删除class" /> <input type="button" id="add_or_del_class" value="增或删class" /> <input type="button" id="add_or_del_class_switch" value="增或删class开关" /> <input type="button" id="add_style" value="添加样式" /> <input type="button" id="del_style" value="删除样式" /> </body> <script type="text/javascript" src="../images/jquery-3.4.1.min.js"></script> <script type="text/javascript"> document.getElementById("add_class").onclick=function(){ /* jQuery提供了专门修改class属性的方法 */ $("#d1").addClass("div1"); } document.getElementById("del_class").onclick=function(){ /* jQuery提供了专门删除class属性的方法 */ $("#d1").removeClass("div1"); } document.getElementById("add_style").onclick=function(){ /* jQuery提供了专门修改样式的方法 */ $("#d1").css("width","100px"); $("#d1").css("height","100px"); $("#d1").css("border","solid 1px red"); /* jQuery获取某属性的值 */ var width = $("#d1").css("width"); alert("d1的width为："+width); } document.getElementById("del_style").onclick=function(){ /* jQuery提供了专门删除样式的方法 */ $("#d1").css("width",""); $("#d1").css("height",""); $("#d1").css("border",""); } document.getElementById("add_or_del_class").onclick=function(){ /* toggleClass:若该类不存在则添加，若该类存在则删除 */ $("#d1").toggleClass("aaa"); } document.getElementById("add_or_del_class_switch").onclick=function(){ /* toggleClass:若该类不存在则添加，若该类存在则删除 */ /* 第二个参数true:增加类，false：删除 */ $("#d1").toggleClass("aaa",false); } </script> </html>