在HTML代码中，通过class属性指定HTML标签的样式名；在jQuery中，可以使用attr()方法操作元素的class属性，以获取或改变元素的样式。
1. addClass()方法： addClass()方法用于对一个或多个匹配元素追加样式，其语法格式如下：
addClass(className) addClass(className1 className2 ... classNameN) addClass(function(index, oldClassName)) className：表示需要追加的样式名className1、className2,…,ClassNameN：表示可以同时追加多个样式，样式名之间使用空格隔开参数function(index, oldClassName)：表示使用函数的返回值作为当前位置的样式，index表示当前元素在集合中的索引值，oldClassName表示当前元素在修改之间的样式名示例：
//追加baseClass样式 $("p[title='desc']").addClass("baseClass"); //追加baseClass和fontColor样式 $("p[title='desc']").addClass("caseClass fontColor");2. removeClass()方法： removeClass()方法用于移除匹配元素的一个或多个样式，也可以一次性移除元素的所有样式，其语法格式如下：
removeClass() removeClass(className) removeClass(className className2 ... classNameN) 无参方法用于移除匹配元素的所有样式className：表示需要删除的样式名className1、className2,…,ClassNameN：表示可以同时移除多个样式，样式名之间使用空格隔开示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery基本操作-样式操作</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> <style type="text/css"> .titleClass { font-size: 20px; font-weight: bold; } .baseClass { padding-left: 20px; background-color: #DDD; } .fontSize { font-size: 16px; } .fontColor { color: #363; } .p0 { color: red; } .p1 { color: blue; } .p2 { color: green; } </style> </head> <body> <p id="articleTitle">jQuery操作元素样式</p> <hr /> <p title="desc">可以使用attr()方法操作元素的class属性，以获取或改变标签的样式。</p> <p title="desc">除此之外，jQuery还提供了addClass()、removeClass()和toggleClass()方法。</p> <p title="desc" id="lastContent">使用addClass()方法可以为一个或多个匹配的页面元素追加样式。</p> <input type="button" value="移除样式" onClick="removeClass()" /> <script type="text/javascript"> $(function(e) { $("#articleTitle").addClass("titleClass"); $("p[title='desc']").addClass("baseClass fontColor"); //根据位置添加不同的样式 $("p[title='desc']").addClass(function(index, oldClass) { console.log(index + " " + oldClass); return 'p' + index; }); }); function removeClass() { $("p").removeClass("fontSize"); //移除指定的样式 $("p").removeClass(); //移除所有的样式 } </script> </body> </html>3. toggleClass()方法： toggleClass()方法用于元素样式之间的重复切换，当元素指定样式存在时，将该样式移除，否则添加该样式。toggleClass()方法的语法格式如下：
toggleClass(className) toggleClass(className, switch) className：表示需要切换的样式名switch：表示切换样式开关，默认为true，当switch为true时允许样式切换，否则不切换示例：
//ID为userName的元素添加样式，如果存在focusClass样式则移除，没有则添加该样式 $("#userName").toggleClass("focusClass"); //第二个参数为真，样式切换为inverseColor $("#saleDept").toggleClass("inverseColor", true);4. css()方法： 在jQuery1.9+中新增了css()方法，用于返回第1个匹配元素的CSS样式，或设置所有匹配元素的样式。css()方法格式如下：
css(attrName) css(key, value) css(properties) css(sttrName, function(index, oldValue)) attrname：表示要访问的属性名称key、value：用于设置元素的某一样式，key表示属性名，value表示属性值properties：用于设置元素的某些样式，为Map类型的键值对所构成的集合参数function(index, oldClassName)：表示使用函数的返回值作为当前位置的样式，index表示当前元素在集合中的索引值，oldClassName表示当前元素在修改之间的样式名示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery基本操作-样式操作</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> <style type="text/css"> .baseClass { background-color: #DDD; } .focusClass { background-color: #FFF; border: 2px dotted #FF0000; } .inverseColor { color: #FFF; background-color: #000; } </style> </head> <body> 销售人员：<input type="text" value="请输入销售人员名称" id="userName" class="baseClass" onFocus="userNameOnFocus()" /><br/> 销售部门： <input type="text" value="请输入销售部门" id="saleDept" /><br/> <input type="button" value="更换销售部门样式(点击3次)" onClick="changeDept()" /> <hr/> <img src="images/flower2.png" width="300px" /><br /> <input type="button" value="放大图片" onClick="enlargeImage()" /> <input type="button" value="缩小大图片" onClick="lessenImage()" /> <script type="text/javascript"> var count = 0; function userNameOnFocus() { $("#userName").toggleClass("focusClass"); } function changeDept() { $("#saleDept").toggleClass("inverseColor", ++count % 3 == 0); } function enlargeImage() { //alert($("img").css("width")); $("img").css({ width: function(index, value) { return parseFloat(value) * 1.1; }, height: function(index, value) { return parseFloat(value) * 1.1; } }); } function lessenImage() { $("img").css({ width: function(index, value) { return parseFloat(value) * 0.9; }, height: function(index, value) { return parseFloat(value) * 0.9; } }); } </script> </body> </html>