jQuery操作css属性等操作

操作css属性

jQuery操作css属性主要依靠：css方法

设置css方法:

• 逐个设置:
  • 在css方法中传入属性,值
    • 两者用逗号隔开
  • 设置完一个属性，同样的方法重新设置另一个属性
• 链式设置
  • 在css方法中传入属性,值
    • 两者用逗号隔开
  • 设置完一个属性,在后面 .css(属性,值) 设置另一个，可以一直链下去
• 批量设置
  • 在css方法中传入一个对象
    • 对象上写要设置的属性和值
    • 和设置css属性的写法一样

获取css方法:

• 在方法中传入要获取属性即可

// 1. 逐个设置
$("div").css("width", "100px");
$("div").css("height", "100px");

// 2. 链式设置
// 注意点：链式操作如果大于3步，建议分开
$("div").css("width", "100px").css("height", "100px").css("background", "red");

 // 3. 批量设置
$("div").css({
    
    
    width: "100px",
    height: "100px",
    background: "red",
});

位置和尺寸操作

• 尺寸操作

  • 获取/设置宽度，width()方法

    • 获取其本身的宽度不加上边框的宽度

      $(".father").width()
      

    • 设置宽度

      $(".father").width("500px")
      

  • 获取/设置高度，height()

  • 获取/设置内容高宽，innerWidth、innerHeight

• 位置操作

  • 获取/设置元素距离窗口的偏移位，offset()方法

    • 类似于absolutet

    • 获取：第三个参数为获取的方向(一共四个方向)

      $(".son").offset().left
      

    • 设置

      $(".son").offset({
                
                left: 10});
      

  • 获取元素距离定位元素的偏移位，position()方法

    • 类似于relative

    • 只能获取不能设置，要设置使用css函数设置

      $(".son").position().left
      

  • 获取/设置滚动偏移量，scrollTop()

    • 获取:

      $(".scroll").scrollTop();
      

    • 设置:

      $(".scroll").scrollTop(300);
      

    • 解决兼容问题

      • 获取兼容

        console.log($(“html”).scrollTop() + $(“body”).scrollTop());

      • 设置兼容

        $(“html, body”).scrollTop(300);

      ​