<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
.cls {
width: 200px;
height: 100px;
background-color: crimson;
}
.cls2 {
border: 2px solid green;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
//为div设置类样式,同时应用多个类样式
//$("#dv").addClass("cls");
//$("#dv").addClass("cls").addClass("cls2");
//$("#dv").addClass("cls cls2");
//console.log($("#dv").addClass("cls"));
//addClass()方法,括号里什么也没有,返回来的仍然是这个对象,即使在括号中设置了内容,返回来的还是这个对象
//removeClass()方法,同上
//移除类样式
//$("#dv").removeClass("cls");
//移除多个类样式
//$("#dv").removeClass("cls").removeClass("cls2");
//$("#dv").removeClass("cls cls2");
//console.log($("#dv").removeClass("cls"));
//css方法是不能添加或者移除类样式的
//$("#dv").css("class","cls");
$(function () {
$("#btn").click(function () {
//判断这个元素是否应用了某个类样式
if ($("#dv").hasClass("cls cls2")) {
console.log("应用了");
} else {
console.log("没有应用");
}
});
});
// hasClass()
// 是判断元素使用应用了这个类样式的
// addClass()
// 添加类样式
// removeClass()
// 移除类样式
});
});
//总结:设置元素的样式可以使用css()方法,也可以使用addClass()或者是removeClass()方法
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
