前言

1部分为原生js
2部分为jquery的写法
以便对比

1 js原生

screen:距离电脑屏幕距离（window.screen）

1.1 offset系列

通过offset系列可以获取盒子高和宽（翻译：抵消；补偿）
  offsetWidth: 获取元素的宽
  offsetHeight: 获取元素的高
  offsetLeft: 获取元素距离左边位置的值
  offsetTop: 获取元素距离上边位置的值

       console.log(div1.offsetWidth,div1.offsetHeight);//获取div1盒子的高和宽
       console.log(div1.offsetLeft,div1.offsetTop);//获取div1盒子的位置

1.2 client系列

client系列: 可视区域（翻译：客户）
针对是内容（元素）距离 不是浏览器可视区域的位置
若是对象是body那么返回的是body的总高或宽（包括被浏览器可视区域看不到的区域）
即这个可视区域的意思是：用户可以看到的（所有）区域，并不是指当前窗口可以看到的区域
   clientWidth: 可视区域的宽(没有边框) width+padding（width是样式宽）
  在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
   clientHeight: 可视区域的高(没有边框) height+padding（height是样式高）
  在页面上返回内容的可视高度（不包括边框，边距或滚动条）
   clientLeft: 左边边框的宽度
   clientTop: 上边的边框的宽度

         console.log(div1.clientWidth,dv.clientHeight) 
         console.log(div1.clientLeft,dv.clientTop)   

1.3 scroll系列

scroll系列: 卷曲--- 滚出去（翻译：滚屏；纸卷；卷轴）

   scrollWidth 元素中内容的实际的宽度
   scrollHeight 元素中内容的实际的高度
   scrollTop 向上卷去的距离
   scrollLeft 向左卷去的距离

       console.log(div1.scrollHeight)  
       console.log(div1.scrollTop)
       
       console.log(body.scrollTop)
       //兼容IE google的写法
       console.log(document.documentElement.scrollTop+document.body.scrollTop)
       console.log(doc.scrollTop)  //undefined

2 jquery写法

2.1 offset和position

获取/设置标签的位置数据
offset() 相对页面左上角的坐标
offset().top
offset().bottm
offset().left
offset().right
offset(“right”,“100”)
position() 相对父元素左上角的坐标

<script src="js/jquery-1.10.1.js"></script>
<script>
    /*
    需求:
     1 通过css获取left和top
     2 点击btn1
        打印div1相对页面左上角的位置
        打印div2相对页面左上角的位置
        打印div1相对于父元素左上角的位置
        打印div2相对于父元素左上角的坐标
    3 点击btn2 
        设置div2相对于页面左上角的位置
    */ 
   //1 通过css获取left和top
   console.log($("#demo").css("left"))
   console.log($("#demo").css("top"))
   //2 点击btn1
   $("#btn1").click(function(){
       console.log($(".div1").offset().left,$(".div1").offset().top)  //10 20
       console.log($('.div2').offset().left,$('.div2').offset().top)  //30 30
       console.log($(".div1").position().left,$(".div1").position().top)
       console.log($(".div2").position().left,$(".div2").position().top)
   })
   //3 设置div2相对于页面左上角的位置
   $("#btn2").click(function(){
       $(".div2").offset({
           left:600,
           top:100
       })
   })
</script>

2.2 元素滚动

滚动条Y轴坐标： scrollTop()

页面滚动条的Y轴坐标 (兼容chrome和IE)：$(document.body).scrollTop+ $(document.documentElement).scrollTop()

滚动到指定的位置(兼容chrome和IE)：$(‘body,html’).scrollTop(60)

<script src="js/jquery-1.10.1.js"></script>
<script>
    //需求
    /*
    1  得到div或者页面滚动条的坐标
    2  让div或者页面的滚动条滚动到指定的位置 
    */ 
    $(function(){
        $("#btn1").click(function(){
            // console.log($(".test").scrollTop())
            // console.log($("body").scrollTop()) //0 chrome edge不好使   IE11好使
            // console.log($("html").scrollTop()) //181 chrome edge好使   IE11不好使
            // //兼容的写法
            console.log($("body").scrollTop()+$("html").scrollTop())
            //同上 document文档
            console.log($(document).scrollTop())
        })
        $("#btn2").click(function(){
            $('.test').scrollTop(300)  
            //$('body,html').scrollTop(150)
            $(document).scrollTop(150)
        })
    })
</script>

2.3 元素的尺寸

内容尺寸：与css中设置的响应的属性相同

内容尺寸高：height()
内容尺寸宽：width()
内部尺寸高：innerHeight() height+padding
内部尺寸宽：innerWidth() width + padding
外部尺寸高：outerHeight(false/true): height+padding+border 如果是true 加上margin
外部尺寸宽：outerWidth(false/true): width +padding+border 如果是true 加上margin
$(window).height()代表了当前可见区域的大小，
$(document).height()则代表了整个文档的高度，可视具体情况使用.
当浏览器窗口大小改变时(如最大化或拉大窗口后) ， $(window).height() 随之改变，但是 $(document).height()是不变的。

源码如下

<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function(){
        var $div = $("div")
        console.log($div.width(),$div.height())
        console.log($div.innerWidth(),$div.innerHeight())
        console.log($div.outerWidth(),$div.outerHeight()) /
        console.log($div.outerWidth(true),$div.outerHeight(true))
        console.log($div.css("width")) //字符串型的数据

    })
</script>