jQuery第十七篇 操作类相关的方法
jQuery第十七篇 操作类相关的方法
贵哥的编程之路
发布于 2020-10-28 16:02:27
发布于 2020-10-28 16:02:27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.class1{
width: 100px;
height: 100px;
background: red;
}
.class2{
border: 10px solid #000;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(function()
{
/*1.addClass(class|fn)
作用: 添加一个类
如果要添加多个, 多个类名之间用空格隔开即可
2.removeClass([class|fn])
作用: 删除一个类
如果想删除多个, 多个类名之间用空格隔开即可
3.toggleClass(class|fn[,sw])
作用: 切换类
*/
var btns=document.getElementsByTagName("button");
btns[0].onclick=function()
{
$("div").addClass("class1 class2");
}
btns[1].onclick=function()
{
$("div").removeClass("class2 class1");
}
btns[2].onclick=function()
{
$("div").toggleClass("class2 class1");
//有就消失(有的话,相当于删除功能把),没有就出现(添加)
}
});
</script>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-08-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读