JQuery 03 CSS

2021-01-14 19:14

阅读：483

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>