jQuery尺寸，位置操作

1.尺寸

        width() | height()   获取宽高，只算width | height

        先准备一个盒子：

  <div></div>
  <style>
    div {
      width: 200px;
      height: 200px;
      padding: 10px;
      border: 2px solid pink;
      margin: 5px;
    }
  </style>

         获取宽高：

  <script>
    $(function () {
      console.log($('div').width());
      console.log($('div').height());
    })
  </script>

 

        可以看到，结果就是盒子的宽度和高度，不包含其他。

        可以设置宽高： （console.log之前添加下面的代码：）

$('div').width(300);

         

        innerWidth() | innerHeight()    包含padding

  $(function () {
      console.log($('div').innerWidth());
      console.log($('div').innerHeight());
    })

 

        可以看到，结果宽=200+10+10 = 220px 包含了padding值，设置方法与上面相同 

        outerWidth() | outerHeight()      包含padding 和 border

  $(function () {
      console.log($('div').outerWidth());
      console.log($('div').outerHeight());
    })

 

        可以看到此时的结果=200+10+10+2+2=224 包含了padding和border 

        outerWidth(true) | outerHeight(true)     包含padding ，border，margin 

    $(function () {
      console.log($('div').outerWidth(true));
      console.log($('div').outerHeight(true));
    })

         结果=200+10+10+2+2+5+5=234 包含padding border margin

2.位置

        offset()     设置或获取元素偏移

        相对于文档的偏移坐标，跟父级没有关系

        先准备两个盒子：

<div class="big">
    <div class="small"></div>
  </div>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .big {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-left: 20px;
    }
    .small {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 50px;
      height: 50px;
      background-color: blue;
    }
  </style>

        使用offset查询小盒子的位置：

  <script>
    $(function () {
      console.log($('.small').offset());
    })
  </script>

  

        返回的是一个对象{top: 200px,left:40px}  =>left 值是40=20+大盒子的margin-left

        返回值是相对于整个页面，并不是相对于父盒子，与父盒子无关

        可以offset().top获取顶部距离，offset().left获取左侧距离

  $(function () {
      console.log($('.small').offset().top);
      console.log($('.small').offset().left);
  })

 

        设置:offset({top:50,left:50})

  $(function () {
      $('.small').offset({ top: 30, left: 10 });
      console.log($('.small').offset().top);
      console.log($('.small').offset().left);
    })

  

        position()      相对于带有定位的父级偏移，若无定位，则以文档

        还是同样两个盒子，我们获取他的position:

$(function () {
      console.log($('.small').position());
 })

 

        可以看到，这次的位置都是相对于父盒子的。

        注意：此方法只能获取，不能设置。 

        scrollTop() | scrollLeft()    被卷去的头部和左部   

（把之前例子的小盒子去掉，大盒子改大）（当页面滚动时，打印被卷去的头部）

  <div class="big"></div>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .big {
      width: 1200px;
      height: 800px;
      background-color: pink;
      margin: 0 auto;
    }
  </style>
  <script>
    $(function () {
      $(window).scroll(function () {
        console.log($(document).scrollTop())
      })
    })
  </script>

    注意：此方法可以获取和设置。