获取元素大小，屏幕大小

一、元素内大小

clientWidth=元素的宽度+元素padding-left+ 元素padding-right

     *   :不包含margin和border

clientHeight=元素的高度+元素padding-top+ 元素padding-bottom

     *  :不包含margin和border

clientLeft=border的宽度

     * :不包含margin和padding

 clientLeft=border的高度

    *  :不包含margin和padding

二、元素外大小

offsetWidth

 元素的宽度+padding-left+padding-right+boder

     *  :不包括margin

offsetHeight

元素的高度+padding-top+padding-bottom+boder

      *:不包括margin

offsetTop

     父类容器没有定位属性： 子类的border边缘算起+子类margin+父类margin+父类padding+父类border

     父类容器有定位属性: 子类的border边缘算起+子类margin+父类padding

offsetLfet

     父类容器没有定位属性： 子类的border边缘算起+子类margin+父类margin+父类padding+父类border

     父类容器有定位属性: 子类的border边缘算起+子类margin+父类padding

    

offsetParent

     找父类节点

     a:如果父类的display属性值为none,则返回null;

     b:如果父类没有定位属性，则继续往上找，直到body

     c:如果父类有定位属性，则返回父类节点

 

    1：获取浏览器的宽高（不包括工具栏滚动条）

     （1.1）：适用于ie9以上其他浏览器

     window.innerWidth

     window.innerHeight

     （1.2）：适用于ie9以上浏览器

     document.documentElement.clientWidth

     document.documentElement.clientHeight

     （1.3）:获取body的宽高

        document.body.clientWidth

        document.body.clientHeight

    2：Window的screen对象

     目的：获取屏幕的宽和高

     window.screen.availWidth

     window.screen.availHeight

详情见：https://blog.csdn.net/qq_39019768/article/details/80489970

 

screenX/Y：鼠标位置相对于屏幕的坐标

pageX/Y：相对于文档边缘（包含滚动条距离）

clientX/Y：相对于当前页面且不包含滚动条距离

offsetX/Y：相对于当前元素（块或行内块），除safari外不包含边框。

详情见：http://www.cnblogs.com/xulei1992/p/5659923.html