jQuery第十七篇操作类相关的方法-CSDN博客

本文链接：https://blog.csdn.net/qq_37805832/article/details/107903596

<!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>