CSS類別操作--.addClass()

JQuery:CSS類別操作--.addClass():

.addClass()方法可以為匹配的元素添加新的CSS類別。此方法只能單純的新增CSS類別到元素中。並不能移除或取代原本就有的類別。

語法:

.addClass( className )

      className:要添加到元素中的CSS類別名稱,可以是一個或多個用空白間隔開來的CSS類別名稱。

.addClass( function(index, currentClass) )

      function:function 是個回呼函式,JQuery會為每個匹配的元素呼叫一次該函式,並且將該函式傳回的值當成CSS類別名稱,添加到匹配的元素中。此function中的this指向的是當時正在處理的匹配元素。

      index:回呼函式的傳入值,JQuery會將匹配索引以此參數傳入,代表第幾個匹配元素。

      currentClass:回呼函式的傳入值,代表目前元素中的CSS類別。

CSS類別操作--.addClass()的範例:

<!doctype html>
	<html>
	<head>
	  <meta charset="utf-8">
	  <title>addClass範例</title>
	  <style>
	  .yellow{
	    background: yellow;
	  }
	  .red {
	    background: red;
	  }
	  .green {
	    background: green;
	  }
	  </style>
	  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	</head>
	<body>
	 
	<div>原本沒有添加任何CSS 類別的段落</div>
	<div>使用.addClass.addClass( function(index, currentClass) )變成紅色背景</div>
	<div>使用.addClass.addClass( function(index, currentClass) )變成綠色背景</div>
	<p>使用.addClass("yellow")變成黃色背景</p>
	<script type="text/javascript">
	$( "p" ).addClass("yellow") ;
	$( "div" ).addClass(function(index,cc){
	if(index==0){
	 // no change
	}
	if(index==1){
	  return "red";
	}
	if(index==2){
	  return "green";
	}
	}) ;
	</script>
	</body>
	</html>

輸出:

其他CSS類別操作請參考:CSS class屬性操作

 
 

  按個讚!~支持本站!~

FB推薦載入中