<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html中,class的添加和删除操作</title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="one" class="classOne classA">ONE</div>
<div id="two" class="classTwo classB">TWO</div>
<div id="three" class="classThree">THREE</div>
<div id="four">FOUR</div>
<button onclick="methodOne()">1</button>
<button onclick="methodTwo()">2</button>
<button onclick="methodThree()">3</button>
<button onclick="methodFour()">4</button>
<script>
function methodOne() {
//移除id为one里面,class名为classOne的
$("#one").removeClass("classOne");
}
function methodTwo() {
//移除多个空格隔开
$("#two").removeClass("classTwo classB");
}
//单个添加class
function methodThree(){
$("#three").addClass("classC");
}
//多个添加class
function methodFour(){
$("#four").addClass("classFour classD");
}
</script>
</body>
</html>
html中,class的添加和删除操作
最新推荐文章于 2023-07-23 09:01:22 发布