<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>css属性(专门用于class属性设置)</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style type="text/css"> .c1{color:red;} .c2{font-size:50px;} .c3{width:100px;height:100px;border:1px solid red;} </style> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> /* addClass //添加一个样式 removeClass //移除一个样式 toggleClass //切换样式(如果有就移除，如果没有就添加) hasClass //判断是否具有某个样式 */ window.onload=function(){ $('#btnOk').click(function(){ //添加c3样式 //$('div').addClass('c3'); //移除一个样式 //$('div').removeClass('c1'); //切换样式(如果有就移除，如果没有就添加) //$('div').toggleClass('c3'); //判断是否具有某个样式 if($('div').hasClass('c1')){ alert('具有c1属性'); }; }); }; </script> </head> <body> <div class='c1 c2 '>test</div> <hr /> <input type="button" id='btnOk' value='确定' /> </body> </html>