<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width:100px;
height: 100px;
margin-top: 10px;;
}
.bgc{
background-color: #FF0000;
}
.fontSize30{
font-size: 30px;
}
.width200{
width:200px;
}
.height400{
height: 400px;
}
</style>
</head>
<body>
<input type="button" value="添加类" id="addClass"/>
<input type="button" value="移除类" id="removeClass"/>
<input type="button" value="判断类" id="hasClass"/>
<input type="button" value="切换类" id="toggleClass"/>
<div id="div1" class="bgc">div1</div>
</body>
</html>
<script src="./jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
//1. 添加类
$('#addClass').click(function(){
//1.1 给id为div1的元素添加类
$('#div1').addClass('fontSize30 width200 height400');
});
//2移除类
$('#removeClass').click(function(){
//2.1 给id为div的元素移除类
$('#div1').removeClass('fontSize30');//一样可以写多个或者单个
// $('#div1').removeClass(); 移除所有类
});
//判断类
$('#hasClass').click(function(){
$('div').hasClass('fontSize30');//有返回值 true 或者false
});
//切换类
$('#toggleClass').click(function(){
$('#div1').toggleClass('fontSize30');
//如果元素有某个类就移除,如果没有就添加
});
});
</script>
记住：这里添加移除等都是需要在CSS样式中定义好的，请参考style中的代码，而且css代码必须使用 .开头，由于是addClass
392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
