jQuery样式相关的操作[0503]
一、开解：
1、 alert($('.hz').attr('class'));//获取样式
2、 $('.hz').attr('class','hz2');//设置样式（原来的$('.hz')因样式变化而失效)
3、 $('.hz').addClass('hz3');//追加样式
4、 $('.hz').removeClass('hz3');//移除样式
5、 $('.hz').toggleClass('hz3');//切换样式（它的作用是有则删除，无则添加）
6、 $('.hz').hasClass('hz3')//判断样式是否存在（配合if使用）
7、 $('.hz').css('color')//取得样式的值
8、 $('.hz').css('color','#00ff00');//设置样式值
上面的一些操作要配合使用，比如，第三点和第四点，先追加后才能删除。第二点要注意的是，它改变了节点，所以当执行第二点后，再执行后面的三四五六七八点都是失效的。
二、实例：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>jquery对样式的操作</title>
<style>
.hz{
color: red;
background: yellow;
}
.hz2{
background: red;
color: pink;
}
.hz3{
font-size: 20pt;
}
</style>
</head>
<body>
<div class="hz">三色方块</div>
<button>取得class属性</button>
<button>设置class属性</button>
<button>追加class样式</button>
<button>移除class样式</button>
<button>切换class样式</button>
<button>判断class样式</button>
<button>取得样式值</button>
<button>设置样式值</button>
</body>
<script>
function cgetcls(){
alert($('.hz').attr('class'));//获取样式
}
function csetcls(){
$('.hz').attr('class','hz2');//设置属性
}
function caddcls(){
$('.hz').addClass('hz3');//追加样式
}
function cdelcls(){
$('.hz').removeClass('hz3');//移除样式
}//可移除多个样式removeClass（'hz hz3'）
function ctogcls(){
$('.hz').toggleClass('hz3');//切换样式
}
function chascls(){
if ($('.hz').hasClass('hz3')) {
alert('存在h3样式');
};//判断样式
}
function cgzcls(){
alert($('.hz').css('color'));//取得样式值
}
function cszcls(){
$('.hz').css('color','#00ff00');//设置样式值
}//可设置多个样式css({'color:green','font-size:30pt'});
</script>
</html>
---------------------
作者：my128
来源：CSDN
原文：blog.csdn.net/MY128/artic…
版权声明：本文为博主原创文章，转载请附上博文链接！
