1. 程式人生 > >JQuery學習筆記-獲取並設定css類

JQuery學習筆記-獲取並設定css類

JQuery中,擁有若干個進行CSS操作的方法。

  • addClass():向被選元素新增一個或多個類;
  • removeClass():向被選元素刪除一個或多個類;
  • toggleClass():對被選元素進行填加/刪除類的切換操作;
  • css():設定或返回樣式屬性。
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>菜鳥教程</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<style type="text/css">
			.red{
				color: red;
			}
			
			.blue{
				color: blue;
			}
			
			.green{
				color: green;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("button").click(function(){
					$("p:nth-child(1)").addClass("red");
					$("p:nth-child(2)").addClass("blue");
					$("p:nth-child(3)").addClass("green");
				});
			});
		</script>
	</head>

	<body>

		<p>第一個</p>
		<p>第二個</p>
		<p>第三個</p>
		
		<button>新增class</button>
	
	</body>

</html>