<head> <title></title> <style type="text/css"> p{background-color:#eee;font-size:30px;} .classadd{background-color:red; font-family:微软雅黑;} .classadd1{font-weight:bold;} </style> <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#Button1').click(function () {//设置样式 $('p').css('background-color', 'blue'); }) $('#Button2').click(function () {//增加样式 $('p').addClass('classadd classadd1'); }) $('#Button3').click(function () {//删除样式 $('p').removeClass('classadd1'); }) $('#Button4').click(function () {//切换样式 $('p').toggleClass('classadd1'); }) }) </script></head><body><p>Hello Wold!</p> <input id="Button1" type="button" value="设置样式" /> <input id="Button2" type="button" value="添加样式" /> <input id="Button3" type="button" value="删除样式" /> <input id="Button4" type="button" value="切换样式" /></body>
效果图：第一张是园效果图
当我点击设置样式按钮时就可以看到第一张图片变为第二张图片（图片背景的变化）
当我单击添加样式时，变化如下：
当我单击删除样式按钮时，变化我们也卡伊清楚的看到，
当我点击切换样式按钮时，相对一第一张图片的变化我们可以看出来。
转载于:https://www.cnblogs.com/qzc900809/archive/2013/04/18/3029607.html
