jQuery操作CSS也是很方便的，咱先看看这几个常用的方法：
- addClass()：向一个元素添加一个或者多个类。
- removeClass()：从一个元素中删除一个类或多个类。
- toggleClass：对元素进行 添加/删除(切换方式) 某个类。
- css()：设置或返回元素的css样式。
1 添加Class
<!DOCTYPE html> <html> <head> <title>learn javascript</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> .red{ color : red; } .paragraph{ font-weight: bold; font-size: xx-large; } </style> </head> <body> <div class="demo"> <p id="p1">一些内容</p> <p id="p2">另一个文本</p> </div> <button id="btn1">添加Class</button> </body> {{--js--}} <script> $(document).ready(function() { $("#btn1").click(function () { $("#p1,#p2").addClass("red paragraph"); }); }); </script> </html>
2 删除Class
<!DOCTYPE html> <html> <head> <title>learn javascript</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> .red{ color : red; } .paragraph{ font-weight: bold; font-size: xx-large; } </style> </head> <body> <div class="demo"> <p id="p1" class="red paragraph">一些内容</p> <p id="p2" class="red paragraph">另一个文本</p> </div> <button id="btn1">删除Class</button> </body> {{--js--}} <script> $(document).ready(function() { $("#btn1").click(function () { $("#p1,#p2").removeClass("red paragraph"); }); }); </script> </html>
3 切换Class
<!DOCTYPE html> <html> <head> <title>learn javascript</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> .red{ color : red; } .paragraph{ font-weight: bold; font-size: xx-large; } </style> </head> <body> <div class="demo"> <p id="p1" class="red paragraph">一些内容</p> <p id="p2" class="red paragraph">另一个文本</p> </div> <button id="btn1">切换Class</button> </body> {{--js--}} <script> $(document).ready(function() { $("#btn1").click(function () { $("#p1,#p2").toggleClass("red paragraph"); }); }); </script> </html>
4 设置或返回CSS
4.1 返回CSS
返回一个css 我们只需要在css方法中写出要获取的css类型就好。
$(document).ready(function() { $("#btn1").click(function () { alert($("#p1").css("background-color")); }); });
4.2 设置CSS
我们可以设置一个或多个css样式：
<script> $(document).ready(function() { $("#btn1").click(function () { $("#p1").css("background-color", "black"); $("#p2").css({"background-color": "black", "color": "white"}); }); }); </script>