- 为元素设置类样式addClass(“类样式的名字”)
- 为元素移除类样式removeClass(“类样式的名字”)
- 判断元素是否有该类样式hasClass(“类样式的名字”)
- addClass()方法,括号里什么也没有,返回来的仍然是这个对象,即使在括号中设置了内容,返回来的还是这个对象
- removeClass()方法,同上
- css方法不能够添加或者移除类样式的[$("#dv").css(“class”,“cls”);]
- 总结:设置元素的样式可以使用css()方法，也可以使用addClass()或者是removeClass()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cls{
width: 100px;
height: 100px;
background-color: blue;
}
.w{
border: 5px solid black;
}
</style>
<script src="../jquery-1.12.1.js"></script>
<script>
$(function () {
//元素类样式的设置
// $("#btn").click(function () {
// //$("#dv").addClass("cls");
// //$("#dv").addClass("cls").addClass("w");
// $("#dv").addClass("cls w");
// });
//元素类样式的移除
$("#btn").click(function () {
// $("#dv").removeClass("cls").removeClass("w");
// $("#dv").removeClass("cls w");
//console.log($("#dv").removeClass(""));
console.log($("#dv").hasClass("cls w"));//布尔类型的值
});
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"/>
<div id="dv" class="cls w"></div>
</body>
</html>案例之网页开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.12.1.js"></script>
<style>
.cls{
background-color: black;
}
</style>
<script>
$("#btn").click(function () {
//判断body标签是否应用了cls类样式
if ($("body").hasClass("cls")){
$("body").removeClass("cls");
$("#btn").val("关灯");
}else{
$("body").addClass("cls");
$("#btn").val("开灯");
}
});
</script>
<script>
$(function () {
$("#btn").click(function () {
//切换类样式
$("body").toggleClass("cls");
});
});
</script>
</head>
<body>
<input type="button" value="开/关灯" id="btn">
</body>
</html>
