JavaScript中形形色色的宽高

第一部分——JavaScript

1.1.window下的宽高属性（window关键字可省略）

①　浏览器宽高

内部：window.innerWidth

  window.innerHeight

外部：window.outerWidth

  window.outerHeight

②用户屏幕宽高

window.screen.width

window.screen.height

window.screen.availWidth

window.screen.availHeight

window.screenTop

window.screenLeft

1.2.document.body相关宽高

① client相关

//content+padding-滚动条宽度：

document.body.clientWidth

document.body.clientHeight

//边框宽度

document.body.clientTop

document.body.clientLeft

②offset相关

//content+padding+border+滚动条宽度（与是否超出预设无关）

document.body.offsetWidth

document.body.offsetHeight

//基于offsetParent（定位父元素）

//浏览器兼容问题：

1.IE6/7:父元素padding+当前margin；

2.IE8/9/10及chrome：父元素m+p+b+当前margin

3.FireFox：父元素m+p+当前margin

document.body.offsetTop

document.body.offsetLeft

③ scroll相关

document.body.scrollWidth

document.body.scrollHeight

//给定宽高小于浏览器宽高时，值为浏览器宽高；

//给定宽高大于浏览器宽高且内容小于给定宽高时，值为给定宽高+m+p+b。

//给定宽高大于浏览器宽高且内容大于给定宽高时，值为内容宽高+m+p+b。

//某div中（火狐中body当做div处理）：

1.无滚动轴时：scrollWidth=clientWidth

 2.有滚动轴时：实际内容宽高+padding

element.scrollLeft

element.scrollTop

//可读写：滚动滚动轴时被卷起的宽高

获取可视区域宽高的兼容问题：

window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth

第二部分——jQuery中的宽高

①.width() || .height()

1.内容宽高；

2.可读写（window&document传值无效），用法：width(value);width(function(){})

3.width()与.css("width")返回的数值完全相同，前有单位，后无

②.innerWidth() || .innerHeight()

1.内容宽高+padding

2.同上

③.outerWidth(Boolean) || .outerHeight(Boolean)

1.可传布尔值控制是否包含margin：

true：内容+p+b+m

false：内容+p+b

④.scrollLeft() && .scrollTop()

⑤.offset() && .position

.offset()：相对于document当前坐标值（相对于body左上角的left，top值）

.position()：相对于offsetParent的当前坐标

第三部分——Event对象的五种坐标

1.clientX和clientY：相对于浏览器左上角

2.screenX和screenY：相对于设备屏幕左上角

3.offsetX和offsetY：相对于事件源左上角

4.pageX和pageY：相对于整个网页左上角

5.x和y：IE中相对于用CSS动态定位的最内层包容元素左上角，其余与clientX/Y相等

注意：element.style.height/width不能取到CSS中设定的宽高，只能取到使用style属性设置的宽高