19-jQuery操作类相关的方法-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn9228/article/details/84716976

本文详细介绍了使用jQuery操作DOM元素类的方法，包括addClass、removeClass和toggleClass。通过实例演示了如何为元素添加、删除和切换样式类，从而改变网页元素的外观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19-jQuery操作类相关的方法</title>
    <style>
        *{
          margin: 0;
          padding: 0;
        }
        .class1{
          width: 100px;
          height: 100px;
          background: #ff241c;
        }
      .class2{
        border: 10px solid #b3d4fc;
      }
    </style>
    <script type="text/javascript" src ="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            1.addClass(class|fn)
            可添加多个类，用空格隔开
            2.removeClass([class|fn)
            可删除多个类，用空格隔开
            3.toggleClass(class|fn[,sw])
            没有就添加类，有就时候删除该类
             */

            // 1.addClass(class|fn)
            var btn = document.getElementsByTagName("button");
            btn[0].onclick = function () {
              //$("div").addClass("class1");
              $("div").addClass("class1 class2");
            }
            //2.removeClass([class|fn)
            btn[1].onclick = function () {
              $("div").removeClass("class2");
              //$("div").removeClass("class1 class2");
            }
            //3.toggleClass(class|fn[,sw])
            btn[2].onclick = function () {
              $("div").toggleClass("class1 class2");
            }
          });
    </script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>