标签：方法 javascrip 结果 pac 移除 highlight span ase border
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( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
<!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属性
获取：
设置：
标签：方法 javascrip 结果 pac 移除 highlight span ase border
原文地址：http://www.cnblogs.com/soulsjie/p/7786975.html
