样式操作
样式类操作
//添加指定的css类名
$('元素选择器')addClass('类名');
//移除指定的css类名
removeClass();
//判断样式存不存在
hasClass();
////切换css类名,有则删除,无则增加
toggleClass();
示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 300px; height: 300px; background-color: pink; } .c2{ width: 100px; height: 100px; background-color: black; } </style> </head> <body> <div class="c1"></div> <script src="jQuery.js"></script> <script> // 添加指定CSS类名(指定CSS类名替换元素选择器指定的标签内容) $('.c1').addClass('c2'); //移除指定CSS类名 $('.c1').removeClass('c2'); //判断指定CSS类名是否存在 $('.c1').hasClass('c2'); //查看指定CSS类名是否存在,有则删除,无则添加 $('.c1').toggleClass('c2'); </script> </body> </html>
CSS样式操作
原生js代码: 标签.style.属性 = '值'; jQuery代码: 单个css样式 $('元素选择器').css('属性','值'); 设置多个css样式 $('元素选择器').css({'属性':'值',属性2:值2})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="c1"></div> <script src="jQuery.js"></script> <script> // 设置单个css样式类 $('.c1').css('color','red'); // 设置多个css样式类 $('.c1').css({'width':'300px','height':'300px','background-color':'yellow'}); </script> </body> </html>