示例1:

增加class

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

示例2:

刪除class

通過removeClass() 刪除一個樣式中的class

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

示例3:

切換class

通過toggleClass() 切換一個樣式中的class

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      $("#d").toggleClass("pink");
   });
   
});
   
</script>
  <button id="b1">切換背景色</button>
<br>
<br>
  
<style>
.pink{
   background-color:pink;
}
</style>
   
<div id="d" >
   
Hello JQuery
   
</div>

示例4:

css函式

通過css函式 直接設定樣式

css(property,value)

第一個引數是樣式屬性，第二個引數是樣式值

css({p1:v1,p2:v2})

引數是 {} 包含的屬性值對。
屬性值對之間用 逗號，分割
屬性值之間用 冒號 ：分割
屬性和值都需要用引號 “

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      $("#d1").css("background-color","pink");
   });
   
   $("#b2").click(function(){
      $("#d2").css({"background-color":"pink","color":"green"});
   });
 
});
   
</script>
  <button id="b1">設定單一樣式</button>
  <button id="b2">設定多種樣式</button>
<br>
<br>
  
<div id="d1" >
   
單一樣式，只設置背景色
   
</div>
 
<div id="d2" >
   
多種樣式，不僅設定背景色，還設定字型顏色
   
</div>