JavaScript概念之screen/client/offset/scroll/inner/avail的..width/height

原文链接：http://caibaojian.com/js-name.html

1、名词解释

• screen：屏幕。这一类取到的是关于屏幕的宽度和距离，与浏览器无关，应该是获取window对象的属性。
• client：使用区、客户区。指的是客户区，当然是指浏览器区域。
• offset：偏移。指的是目标甲相对目标乙的距离。
• scroll：卷轴、卷动。指的是包含滚动条的的属性。
• inner：内部。指的是内部部分，不含滚动条。
• avail：可用的。可用区域，不含滚动条，易与inner混淆。

原文链接： http://caibaojian.com/js-name.html

2、window

2.1、window.innerWidth/innerHeight

描述：浏览器可见区域的内宽度、高度（不含浏览器的边框，但包含滚动条）。

兼容：ie9/10、chrome、firefox。

2.2、window.outerWidth/outerHeight

描述：浏览器外宽度（包含浏览器的边框，因各个浏览器的边框边一样，得到的值也是不一样的）。

兼容：ie9/10、chrome、firefox。

原文链接： http://caibaojian.com/js-name.html

2.3、window.screenLeft/screenTop

描述：浏览器的位移，表示：

• ie浏览器的内边缘距离屏幕边缘的距离。
• chrome浏览器的外边缘距离屏幕边缘的距离。

如图：

兼容：ie6/7/8/9/10、chrome。

2.4、window.screenX/screenY

描述：浏览器的位移，表示：

• ie9/10浏览器的外边缘距离屏幕边缘的距离。
• chrome浏览器的外边缘距离屏幕边缘的距离。

由此可知，chrome的screenLeft和screenX是相等的（其目的是为了兼容ie和firefox，两个属性都兼备了，但更趋向于firefox，chrome的这种做法不止这一处，还有很多，其实这种做法便于开发者移植，但对开发者的开发过程产生了一定的混淆），ie9/10的screenLeft是大于screenX的，如图：

兼容：ie9/10、chrome、firefox。

2.5、window.pageXOffset/pageYOffset

描述：表示浏览器X轴（水平）、Y轴（垂直）滚动条的偏移距离。

兼容：ie9/10、chrome、firefox。

2.6、window.scrollX/scrollY

描述：表示浏览器X轴（水平）、Y轴（垂直）滚动条的偏移距离。由此可知，在chrome和firefox中window.pageXOffset和window.scrollX是相等的，具体为什么会出现两个相等的属性值，不得而知。

兼容：chrome、firefox。

3、screen

3.1、screen.width/height

描述：屏幕的宽度、高度（指的是屏幕的分辨率，单位为像素）。

兼容性：ie6/7/8/9/10、chrome、firefox。

注意：此处必须是screen.width，而不是screenWidth，与接下来要说的各种宽度有所区别。

3.2、screen.availWidth/availHeight

描述：屏幕的可用宽度、高度（通常与屏幕的宽度、高度一致）。

兼容性：ie6/7/8/9/10、chrome、firefox。

4、element

元素的宽度、位移、距离以元素的盒模型为content-box为例。即：

box-sizing: content-box;

其他盒模型计算会有差异，请勿对号入座。

4.1、elment.clientWidth/clientHeight

描述：计算如下，

• 有滚动条时：clientWidth=元素左内边距宽度+元素宽度+元素右内边距宽度-元素垂直滚动条宽度
• 无滚动条时：clientWidth=元素左内边距宽度+元素宽度+元素右内边距宽度

使用该特性可以计算出的滚动条宽度（即设置元素的内容宽度超过元素宽度，然后分别设置是否超过隐藏，两次的clientWidth差值就是滚动条的宽度）。

兼容：chrome、firefox、ie6/7/8/9/10。

示例（宽度和高度都为100px，边框为50px，内边距为60px，外边距为70px，左、上位移为80px，滚动条的宽度因系统不同而不同）：

4.2、element.clientLeft/clientTop

描述：clientLeft为左边框宽度，clientTop为上边框宽度。

兼容：chrome、firefox、ie6/7/8/9/10。

示例（宽度和高度都为100px，边框为50px，内边距为60px，外边距为70px，左、上位移为80px，滚动条的宽度因系统不同而不同）：

4.3、element.offsetWidth/offsetHeight

描述：offsetWidth=元素左边框宽度+元素左内边距宽度+元素宽度+元素右内边距宽度+元素右边框宽度。

兼容：chrome、firefox、ie6/7/8/9/10。

4.4、element.offsetLeft/offsetTop

描述：表示该元素相对于最近的定位祖先元素的距离，

chrome：offsetLeft=定位祖先左边框宽度+定位祖先元素左内边距宽度+左位移+左外边距宽度

ie6/7/8/9/10、firefox：offsetLeft=定位祖先元素左内边距宽度+左位移+左外边距宽度。

chrome比其他浏览器多计算了定位祖先元素的边框。offsetTop同理。

兼容：chrome、firefox、ie6/7/8/9/10。

示例（宽度和高度都为100px，边框为50px，内边距为60px，外边距为70px，左、上位移为80px，滚动条的宽度因系统不同而不同）：

4.5、element.scrollWidth/scrollHeight

描述：计算方法如，

• 有滚动条时：
  • chrome、firefox、ie8/9/10：左内边距宽度+内容宽度。
  • ie6/7：左内边距宽度+内容宽度+右内边距宽度（是由CSS的BUG引起）。
• 无滚动条时：左内边距宽度+宽度+右内边距宽度。

兼容：chrome、firefox、ie8/9/10、ie6/7（半兼容）。

示例（宽度和高度都为100px，边框为50px，内边距为60px，外边距为70px，左、上位移为80px，滚动条的宽度因系统不同而不同，内容宽度和高度都为200px）：

4.6、element.scrollLeft/scrollTop

描述：获得水平、垂直滚动条的距离。

兼容：chrome、firefox、ie6/7/8/9/10。

示例（宽度和高度都为100px，边框为50px，内边距为60px，外边距为70px，左、上位移为80px，滚动条的宽度因系统不同而不同）：

5、总结

因为document.documentElement就是浏览器的html标签，所以获取浏览器的相关属性，也可以用该对象来获取。

屏幕宽度：window.screen.width。

浏览器内宽度：window.innerWidth || document.documentElement.clientWidth。

元素内容宽度：element.clientWidth。

元素占位宽度：element.offsetWidth。

元素相对位置：无。

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height 
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight (pc上指除去底部任务栏)
屏幕可用工作区宽度： window.screen.availWidth  (pc上指除去底部任务栏)