<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>12.4jQuery属性与样式之样式的操作</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//设置样式1
$('#btn1').click(function(){
$('#div1').attr('class','class1');
});
//设置样式2
$('#btn2').click(function(){
$('#div1').attr('class','class2');
});
//设置样式1和2
$('#btn3').click(function(){
$('#div1').attr('class','class1 class2');
});
//注意:设置样式时候，只有最后一次设置的样式生效，设置多个样式的时候，样式的名字之间用空格分开
//追加样式1
$('#btn4').click(function(){
$('#div1').addClass('class1');
});
//追加样式2
$('#btn5').click(function(){
$('#div1').addClass('class2');
});
//同时追加2个样式
$('#btn6').click(function(){
$('#div1').addClass('class2 class1');
});
//追加样式，每个样式都会生效
//追加样式时候：可以追加一个或则多个
//删除样式1
$('#btn7').click(function(){
//$('#div1').removeClass('class1');
//删除样式之前判断一下有没有这个类样式
//.hasClass(classname)
if($('#div1').hasClass('class1'))
{
//删除样式1
$('#div1').removeClass('class1');
alert("删除class1成功！");
}
else
{
alert("没有class1，删除class1失败!");
}
});
//删除样式2 自己完成
$('#btn8').click(function(){
//$('#div1').removeClass('class2');
//删除样式之前判断一下有没有这个类样式
//.hasClass(classname)
if($('#div1').hasClass('class2'))
{
//删除样式1
$('#div1').removeClass('class2');
alert("删除class2成功！");
}
else
{
alert("没有class2，删除class2失败!");
}
});
//同时删除样式1与样式2 自己完成
$('#btn9').click(function(){
//$('#div1').removeClass('class1 class2');
//删除样式之前判断一下有没有这个类样式
//.hasClass(classname)
if($('#div1').hasClass('class1')&&$('#div1').hasClass('class2'))
{
//删除样式1
$('#div1').removeClass('class1 class2');
alert("删除class1 class2成功！");
}
else
{
alert("没有class1 class2，删除class1 class2失败!");
}
});
//样式的切换.toggleClass()
$('#btn10').click(function(){
//$('#div1').toggleClass();
$('#div1').toggleClass('class1');
//增加class1和删除class1之间的切换
});
});
</script>
<style>
#div1{
width:200px;
height:200px;
border:2px solid red;
}
.class1{
background-color:#CCC;
}
.class2{
color:red;
}
</style>
</head>
<body>
<div id="div1">
样式操作
</div>
<input type="button" id="btn1" value="设置样式1" >
<input type="button" id="btn2" value="设置样式2" >
<input type="button" id="btn3" value="同时设置样式1与样式2" >
<br>
<input type="button" id="btn4" value="追加样式1">
<input type="button" id="btn5" value="追加样式2">
<input type="button" id="btn6" value="同时追加样式1与样式2">
<br>
<input type="button" id="btn7" value="删除样式1">
<input type="button" id="btn8" value="删除样式2">
<input type="button" id="btn9" value="同时删除样式1与样式2">
<br>
<input type="button" id="btn10" value="样式切换">
<br>
</body>
</html>
