<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title></title> <style src="text/css"> div{ width:300px; height:800px; border:1px solid red; } .cs1{ border:1px solid yellow; } .cs2{ font-size:14px; font-weight:bold; color:red; } .cs3{ background-color:blue; } </style> <script src="js/jquery.js"></script> <script> window.onload = function(){ $('#btnok')[0].onclick = function(){ //1.为元素添加class样式 //$('div').addClass('cs3'); //2,为元素添加多个class样式 //$('div').addClass('cs1 cs2 cs3'); //3.移除样式 //$('div').removeClass('cs3'); //4.切换显示class样式 //$('div').toggleClass('cs2'); //5.判断元素是否具有指定的class属性 if($('div').hasClass('cs3')){ $('div').removeClass('cs3'); }else{ $('div').addClass('css2'); } } } </script> </head> <body> <input type="button" id="btnok" value="class属性设置" /> <hr /> <div class="cs3">夺命雷公狗使用的是目前最多人使用的jquery代码库</div> </body> </html>