js/jQuery中的宽高

一、和window有关的宽高

window.innerWidth:浏览器窗口宽度

window.innerHeight:浏览器窗口高度（不包括导航，工具栏等的高度）

window.outerWidth:浏览器窗口宽度（很多时候===window.innerWidth）

window.outerHeight:浏览器窗口高度（包括导航，工具栏等的高度）

window.screen.width:用户设备屏幕的宽度

window.screen.height:用户设备屏幕的高度

window.screen.availWidth:

window.screen.availHeight:

window.screenTop:浏览器距离屏幕顶部高度

window.screenLeft:浏览器距离屏幕左侧宽度

二、client有关宽高

clientWidth、clientHeight: padding+content 如果有滚动条 再减去滚动条宽度/高度

clientTop:等于border-top的width

clientLeft:等于border-left的width

三、offset相关宽高

offsetHeight，

offsetWidth 等于border+padding+content;与内容是否超出原设定宽高无关，与是否有滚动轴无关

offsetLeft:相对于定位父级（offsetParent）元素左侧距离；offsetParent的margin-left+offsetParent的border-left宽度+当前元素的margin-left

offsetTop:相对于定位父级（offsetParent）元素左侧距离；

 

四、与scroll相关的宽高

scrollLeft,被滚动条隐藏部分的宽度

scrollTop: 被滚动条隐藏部分的高度

scrollWidth：内容的全部实际宽度，当内容不超过可视区域的时候=clientWidth

scrollHeight：内容的全部实际高度，当内容不超过可视区域的时候clientHeight

js种获取可视区域高度：window.innerHeight||document.documentElement.clientHegiht||document.body.clientHeight

js获取页面滚动高度：document.body.scrollTop

js获取页面整体高度：document.body.scrollHeight

五`documentElement与body的关系

document(nodetype=9,nodeName=#docuemnt)——>documentElement(nodeType=1,nodeName=html)——>body(nodeType=1,nodeName=body)

documentElement是body的父元素

dom元素的getBoundingRect()方法，可以获得top，left，bottom，right四个坐标，这四个坐标都是相对于文档的

六、Event对象的四种坐标

clinetX,clientY 相对于可视区域左上角坐标

screenX,screenY 相对于设备屏幕左上角坐标

offsetX,offsetY 相对于事件源左上角坐标

pageX,pageY 相对于整个页面左上角坐标

七、jQuery中的宽和高

jQuery中宽高相关的方法比js要精简很多

1、.width()，.height()

　　1）对于特殊元素document，window，是只读的

　　2）对于普通元素，可读写、

　　3）对应css中的width，height，只是不带单位

2. .innerWidth(),.innerHeight()

　　1)对于特殊元素document,window，是只读的，但不推荐。此时等同于width(),height（）的写法

　　2）对于普通元素，可读写

　　3）=width+padding(box-sizing：content-box)

3. .outerWidth(Boolean),.outerHeight(Boolean)

　　1）对于特殊元素document，window，不推荐使用这两种方法

　　2）对于普通元素，如果传入true，则包含marign，否则不包含

4. .scrollTop(),.scrollLeft()

　　对应js中的scrollTop，scrollLeft（被滚动条卷进去的部分），如果不能滚动，则为0

5. .offset()

　　相对于body左上角的left，top的值

6..position()

　　相对于offsetParent左上角的值，类似于js中的offsetLeft/offsetTop

jQuery获取可视区域的宽度：$(window).height()

jQuery获取滚动的高度：$(window).scrollTop()

jQuery获取文档的高度：$(document).height()