jQuery(三)_设置CSS

jQuery(三)_设置CSS

• 获取css样式

  相当于js中计算后的样式

  getComputedStyle(box).width;

  box.currentStyle.width;

  $(".box").css("width");
  $(".box").css(["width","100px"]);
  //获取多个CSS样式，返回对象 
  

• 设置div样式

  $("div").width(100);
  $("div").innerWidth(100);
  
  $("box1").offset({left:100,top:100});
  //设置到页面顶端距离位置
  

  方法名	描述
  innerWidth()	width+padding
  innerHeight()	height+padding
  outerWidth()	width+padding+border
  outerHeight()	height+padding+border
  outerWidth(true)	width+padding+margin+border
  outerHeight(true)	height+padding+margin+border

• 设置div多个样式

  $("div").css({
      width:100,
      height:100,
      backgroundColor:"red"
  });
  $("div").css(["width","100px"])
  

• 为多个div设置样式

  $("div").css("width",function(index){
      return 50 * (index + 1) + "px";
  })
  

• 为div设置多个class样式

  $("div").addClass("box1");
  $("div").addClass("box1 box2");
  $("div").removeClass("box1");
  

• 切换样式

  $(this).assClass("div1");
  $("box").hover(function(){
    $(this).addClass("div2");
  },function(){
    $(this).removeClass("div2");
  })
  

  $("div").addClass("div1").click(function () {
      $(this).toggleClass("div2");//开关切换
      $(this).toggleClass("div2", true);//仅切换一次
      $(this).toggleClass("div2", false);//不切换
  })