Zerlinda's Blog

JavaScript概念:screen/client/offset/scroll/inner

JS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离。
1、名词解释

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

2、window
2.1、window.innerWidth/innerHeight
描述:浏览器可见区域的内宽度、高度(不含浏览器的边框,但包含滚动条)。
兼容:ie9/10、chrome、firefox。
2.2、window.outerWidth/outerHeight
描述:浏览器外宽度(包含浏览器的边框,因各个浏览器的边框边一样,得到的值也是不一样的)。
兼容:ie9/10、chrome、firefox。
注意:没有window.width属性。
2.3、window.screenLeft/screenTop
描述:浏览器的位移,表示:
ie浏览器的内边缘距离屏幕边缘的距离。
chrome浏览器的外边缘距离屏幕边缘的距离。
2.4、window.screenX/screenY
描述:浏览器的位移,表示:
ie9/10浏览器的外边缘距离屏幕边缘的距离。
chrome浏览器的外边缘距离屏幕边缘的距离。
由此可知,chrome的screenLeft和screenX是相等的(其目的是为了兼容ie和firefox,两个属性都兼备了,但更趋向于firefox,chrome的这种做法不止这一处,还有很多,其实这种做法便于开发者移植,但对开发者的开发过程产生了一定的混淆),ie9/10的screenLeft是大于screenX的
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。
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。
4.2、element.clientLeft/clientTop
描述:clientLeft为左边框宽度,clientTop为上边框宽度。
兼容:chrome、firefox、ie6/7/8/9/10。
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。
4.5、element.scrollWidth/scrollHeight
有滚动条时:
chrome、firefox、ie8/9/10:左内边距宽度+内容宽度。
ie6/7:左内边距宽度+内容宽度+右内边距宽度(是由CSS的BUG引起)。
无滚动条时:左内边距宽度+宽度+右内边距宽度。
兼容:chrome、firefox、ie8/9/10、ie6/7(半兼容)。
4.6、element.scrollLeft/scrollTop
描述:获得水平、垂直滚动条的距离。
兼容:chrome、firefox、ie6/7/8/9/10。
5、总结
因为document.documentElement就是浏览器的html标签,所以获取浏览器的相关属性,也可以用该对象来获取。
屏幕宽度:window.screen.width。
浏览器内宽度:window.innerWidth || document.documentElement.clientWidth。
元素内容宽度:element.clientWidth。
元素占位宽度:element.offsetWidth。
元素相对位置:无。

发表评论

电子邮件地址不会被公开。 必填项已用*标注