jQuery的添加，移除，判断，切换方法的使用练习

发布时间：2023年12月28日

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      margin-top:10px;
    }
    .bgc {
      background-color: green;
    }
    .fontSize30 {
      font-size: 30px;
    }
    .width200 {
      width: 200px;
    }

  </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 ">HelloWorld</div>
</body>
</html>

<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
    $('#addClass').click(function(){
        $('#div1').addClass('fontSize30 width200')
    });

    $('#removeClass').click(function(){
        $('#div1').removeClass()
    })
    $('#hasClass').click(function(){
        console.log($('#div1').hasClass('fontSize30'))
    })
    $('#toggleClass').click(function(){
        $('#div1').toggleClass('fontSize30')
    })
})


</script>

文章来源:https://blog.csdn.net/m0_56713342/article/details/135273513
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章