JQuery CSS

最新推荐文章于 2022-10-05 11:00:19 发布

new一个对象()

最新推荐文章于 2022-10-05 11:00:19 发布

阅读量105

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/lolhahahaha/article/details/119032824

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了jQuery中用于操作元素class的三个核心方法：addClass用于增加class，removeClass用于移除class，toggleClass则实现class的开关切换。通过示例代码展示了如何在点击按钮时改变div的背景颜色，从而直观地理解这些方法的工作原理。

摘要由CSDN通过智能技术生成

addClass	增加class
removeClass	移除class
toggleClass	切换class
class	css函数

1、增加Class

通过addClass() 增加一个样式中的class

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $("#b1").click(function(){
      $("#d1").addClass("pink");
   });
  
});
  
</script>
  <button id="b1">增加背景色</button>
<br>
<br>
<style>
.pink{
  background-color:pink;
}
</style>
<div id="d1">
 我是div
</div>

2、移除class

通过removeClass() 删除一个样式中的class

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $("#b1").click(function(){
      $("#d1").removeClass("pink");
   });
  
});
  
</script>
  <button id="b1">增加背景色</button>
<br>
<br>
<style>
.pink{
  background-color:pink;
}
</style>
<div id="d1" class="pink">
 我是div
</div>

3、切换（开/关）class

通过toggleClass() 切换一个样式中的class
这里的切换，指得是：
如果存在就删除
如果不存在，就添加

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $("#b1").click(function(){
      $("#d1").toggleClass("pink");
   });
  
});
  
</script>
  <button id="b1">增加背景色</button>
<br>
<br>
<style>
.pink{
  background-color:pink;
}
</style>
<div id="d1" class="pink">
 我是div
</div>