jQuery學習之------元素樣式的操作
阿新 • • 發佈：2017-11-05
ise 偶數 class add fun order 布爾值 ebe 對象
jQuery學習之------元素樣式的操作
一、.addClass( className )方法----增加樣式
1.addClass( className ) : 為每個匹配元素所要增加的一個或多個樣式名
<head>
<style>
/*css樣式代碼*/
.soulsjie{
background:red;
}
.newstyle{
height:100px;
width:100px;
}
.newsty2{
font-size:16px;
}
</style>
<!--引入jQuery-->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="soulsjie">內容</div>
<script type="text/javascript">
//利用addClass（）給div增加樣式，可增加一個或者多個
$(‘.soulsjie‘).addClass(‘newstyle newsty2‘)
</script>
</body>
2.addClass( function(index, currentClass) ) : 這個函數返回一個或更多用空格隔開的要增加的樣式名
.soulsjie{
background:red;
}
.cs1{
background:#f0f;
}
.cs2{
background:#ff0;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="soulsjie">內容</div>
<script type="text/javascript">
var aa=1;
//利用addClass（）給div增加樣式
$(‘.soulsjie‘).addClass(function(){
if(aa%2==2){
$(this).addClass(‘cs1‘);
}
else{
$(this).addClass(‘cs2‘) ;
}
})
</script>
</body>
二、.removeClass( )方法-----移除元素的css樣式
1.removeClass( [className ] )：每個匹配元素移除的一個或多個用空格隔開的樣式名
.soulsjie{
background:red;
}
.cs1{
background:#f0f;
}
.cs2{
background:#ff0;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="soulsjie cs1 cs2">內容</div>
<script type="text/javascript">
var aa=1;
//利用removeClass（）移除元素上的樣式
$(‘.soulsjie‘).removeClass(‘soulsjie‘)
</script>
</body>
2.removeClass( function(index, class) ) ： 一個函數，返回一個或多個將要被移除的樣式名
.soulsjie{
background:red;
}
.cs1{
background:#f0f;
}
.cs2{
background:#ff0;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="soulsjie cs1 cs2">內容</div>
<script type="text/javascript">
var aa=1;
//利用removeClass（）移除元素上的樣式
var aa=1;
$(‘.soulsjie‘).removeClass(function(){
if(aa%2==0){
return ‘cs1‘;
}
else{
return ‘cs2‘;
}
})
</script>
</body>
三.toggleClass( )方法：在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類,取決於這個樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個類
- .toggleClass( className )：在匹配的元素集合中的每個元素上用來切換的一個或多個（用空格隔開）樣式類名
- .toggleClass( className, switch )：一個布爾值，用於判斷樣式是否應該被添加或移除
- .toggleClass( [switch ] )：一個用來判斷樣式類添加還是移除的 布爾值
- .toggleClass( function(index, class, switch) [, switch ] )：用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函數。接收元素的索引位置和元素舊的樣式類作為參數
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>隔行換色的例子</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
body,
table,
td,
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.dise {
background: #ebebeb;
}
</style>
</head>
<body>
<div>
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td>vv</td>
<td>vv</td>
</tr>
<tr>
<td>vv</td>
<td>vv</td>
</tr>
<tr>
<td>vv</td>
<td>vv</td>
</tr>
<tr>
<td>ss</td>
<td>ss</td>
</tr>
<tr>
<td>ww</td>
<td>ww</td>
</tr>
</table>
</div>
<script type="text/javascript">
//給所有的tr元素加一個class="dise"的樣式
$("#table tr").toggleClass("dise");
</script>
<script type="text/javascript">
//給所有的偶數tr元素切換class="dise"的樣式
//所有基數的樣式保留，偶數的被刪除
$("#table tr:odd").toggleClass("dise");
</script>
<script type="text/javascript">
//第二個參數判斷樣式類是否應該被添加或刪除
//true，那麽這個樣式類將被添加;
//false，那麽這個樣式類將被移除
//所有的奇數tr元素，應該都保留class="dise"樣式
$("#table tr:even").toggleClass("dise", true); //這個操作沒有變化，因為樣式已經是存在的
</script>
</body>
</html>
四、.css() 方法：獲取元素樣式屬性的計算值或者設置元素的CSS屬性
獲取：
- .css( propertyName ) ：獲取匹配元素集合中的第一個元素的樣式屬性的計算值
- .css( propertyNames )：傳遞一組數組，返回一個對象結果
設置：
- .css(propertyName, value )：設置CSS
- .css( propertyName, function )：可以傳入一個回調函數，返回取到對應的值進行處理
- .css( properties )：可以傳一個對象，同時設置多個樣式
jQuery學習之------元素樣式的操作