原文链接:http://caibaojian.com/js-name.html
JavaScript概念之screen/client/offset/scroll/inner/avail的..width/height
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiYWan5iNyUjM4MzNxkjMwEjMxAjMvw1NyUzN2MzLcJTMwIzLcNXZnFWbp9CXt92YuM3ZvxmYuNmLyADMjlGcvw1LcpDc0RHaiojIsJye.gif)
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,滚动条的宽度因系统不同而不同):
描述:clientLeft为左边框宽度,clientTop为上边框宽度。
兼容:chrome、firefox、ie6/7/8/9/10。
示例(宽度和高度都为100px,边框为50px,内边距为60px,外边距为70px,左、上位移为80px,滚动条的宽度因系统不同而不同):
描述: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上指除去底部任务栏)