jQuery 拥有若干进行 CSS 操作的方法：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
addClass() 向被选元素添加一个或多个类
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<script type="text/javascript" src="jquery.min.js"></script> ???????<script> ???????????$(document).ready(function() { ???????????????$("#btn").click(function() { ???????????????????$("p").addClass("addcss"); ???????????????}); ???????????????????????????}); ???????</script> ???????<style> ???????????.addcss{ ???????????????color: #FF0000; ???????????} ???????</style> ???</head> ???<body> ???????<p>测试追加样式</p> ???????<button id="btn">追加样式</button> ???</body></html>removeClass() 从被选元素删除一个或多个类
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<script type="text/javascript" src="jquery.min.js"></script> ???????<style> ???????????.removecss { ???????????????color: #FF0000; ???????????????font-weight: bold; ???????????} ???????</style> ???????<script> ???????????$(document).ready(function() { ???????????????????$("button").click(function() { ???????????????????????$("p").removeClass("removecss"); ???????????????????}); ???????????}); ???????</script> ???</head> ???<body> ???????<p class="removecss">测试追加样式</p> ???????<button>移除样式</button> ???</body></html>toggleClass() 对被选元素进行添加/删除类的切换操作
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<script type="text/javascript" src="jquery.min.js"></script> ???????<style> ???????????.togglecss { ???????????????color: #FF0000; ???????????????font-weight: bold; ???????????} ???????</style> ???????<script> ???????????$(document).ready(function() { ???????????????????$("button").click(function() { ???????????????????????$("p").toggleClass("togglecss"); ???????????????????}); ???????????}); ???????</script> ???</head> ???<body> ???????<p class="togglecss">测试追加样式</p> ???????<button>切换样式</button> ???</body></html>css() 设置或返回样式属性
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<script type="text/javascript" src="jquery.min.js"></script> ???????<script> ???????????$(document).ready(function() { ???????????????????$("button").click(function() { ???????????????????????$("p").css({"color":"blue","font-size":"200%"}); ???????????????????????alert($("p").css("color")); ???????????????????}); ???????????}); ???????</script> ???</head> ???<body> ???????<p style="color: #FF0000;">测试追加样式</p> ???????<button>设置返回样式</button> ???</body></html>jQuery-获取并设置CSS
原文地址：https://www.cnblogs.com/xianya/p/9853140.html