jQuery CSS操作

jQuery CSS操作

• 元素css操作

  • css(name|pro|[,val|fn])：访问匹配元素的样式属性

  HTML：

  <button name="btn" id="btn" title="你好">按钮</button>
  

  jQuery：

  $("#btn").css("width", "200px");
   console.log($("#btn").css("width"));
   $("#btn").css("width", function (index, old) {
       return "150px";
   });
   //一次性操作多个样式
   $("#btn").css({
       "width": "100px",
       "height": "30px"
   });
   $("#btn").attr({
       "name": "张三",
       "data-index": 10
   });
   $("#btn").removeAttr("name data-index");
  

• 元素位置操作

  • offset([coordinates])：获取匹配元素在当前视口的相对偏移

  HTML：

   <div class="block">
   	<div class="b"></div>
   </div>
  

  jQuery：

   console.log($(".block").offset().left);
   console.log($(".block").offset().top);
  

  • position()：获取匹配元素相对父元素的偏移

  HTML：

   <div class="block">
   	<div class="b"></div>
   </div>
  

  jQuery：

   console.log($(".block").position());
  

  • pscrollLeft([val])、scrollTop([val])：获取匹配元素相对滚动条左侧、顶部的偏移

  HTML：

   <div class="block">
   	<div class="b"></div>
   </div>
  

  jQuery：

  $(".block").on("scroll",function (){
       //console.log($(".block").scrollTop());
       console.log($(".block").scrollLeft());
   });
   $(".block").scrollLeft(30);
  

• 元素尺寸操作

  HTML：

   <div class="box" style=“width: 300px;height: 300px;border: 1px solid #000;padding: 20px 20px;margin: 10px;”>
  
   </div>
  

  jQuery：

   console.log($(".box").width());
   console.log($(".box").height());
   console.log($(".box").innerWidth());
   console.log($(".box").innerHeight());
   console.log($(".box").outerWidth());
   console.log($(".box").outerHeight());
   $(".box").width(function (index,old){
       console.log(index,old);
       return old+100;
   });