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

1、名词解释

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

2、window

2.1、window.innerWidth/innerHeight

描述:浏览器可见区域的内宽度、高度(不含浏览器的边框,但包含滚动条)。

兼容:ie9/10、chrome、firefox。

示例(缩放浏览器的宽度为1000px,高度为500px):

alert(window.innerWidth);
// chrome/firefox/ie9/10=>1000
// ie6/7/8=>undefined
alert(window.innerHeight);
// chrome/firefox/ie9/10=>500
// ie6/7/8=>undefined

2.2、window.outerWidth/outerHeight

描述:浏览器外宽度(包含浏览器的边框,因各个浏览器的边框边一样,得到的值也是不一样的)。

兼容:ie9/10、chrome、firefox。

示例(缩放浏览器的宽度为1000px,高度为500px):

alert(window.outerWidth);
// chrome/firefox/ie9/10=>1002
// ie6/7/8=>undefined
alert(window.outerHeight);
// chrome/firefox/ie9/10=>502
// ie6/7/8=>undefined

注意:没有window.width属性。

2.3、window.screenLeft/screenTop

描述:浏览器的位移,表示:

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

如图:

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

示例:

  1. alert(window.screenLeft);
  2. // ie=>87
  3. // chrome=>86
  4. // firefox=>undefined
  5. alert(window.screenTop);
  6. // ie=>87
  7. // chrome=>86
  8. // firefox=>undefined

2.4、window.screenX/screenY

描述:浏览器的位移,表示:

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

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

【图】

兼容:ie9/10、chrome、firefox。

示例:

  1. alert(window.screenX);
  2. // chrome/firefox=>86
  3. // ie9/10=>79
  4. // ie6/7/8=>undefined
  5. alert(window.screenY);
  6. // chrome/firefox=>86
  7. // ie9/10=>79
  8. // ie6/7/8=>undefined

2.5、window.pageXOffset/pageYOffset

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

兼容:ie9/10、chrome、firefox。

示例:

  1. document.onclick=function(){
  2. alert(window.pageXOffset);
  3. // chrome=>200
  4. // firefox=>200
  5. // ie9/10=>200
  6. // ie6/7/8=>undefined
  7. alert(window.pageYOffset);
  8. // chrome=>200
  9. // firefox=>200
  10. // ie9/10=>200
  11. // ie6/7/8=>undefined
  12. };

2.6、window.scrollX/scrollY

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

兼容:chrome、firefox。

示例:

  1. document.onclick=function(){
  2. alert(window.scrollX);
  3. // chrome=>200
  4. // firefox=>200
  5. // ie6/7/8/9/10=>undefined
  6. alert(window.scrollY);
  7. // chrome=>200
  8. // firefox=>200
  9. // ie6/7/8/9/10=>undefined
  10. };

3、screen

3.1、screen.width/height

描述:屏幕的宽度、高度(指的是屏幕的分辨率,单位为像素)。

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

示例(屏幕的分辨率为1440×900):

  1. alert(screen.width);
  2. // chrome/firefox/ie6/7/8/9/10=>1440
  3. alert(screen.height);
  4. // chrome/firefox/ie6/7/8/9/10=>900

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

3.2、screen.availWidth/availHeight

描述:屏幕的可用宽度、高度(通常与屏幕的宽度、高度一致)。

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

示例:

  1. alert(screen.availWidth);
  2. // chrome/firefox/ie6/7/8/9/10=>1440
  3. alert(screen.availHeight);
  4. // chrome/firefox/ie6/7/8/9/10=>900

4、element

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

  1. box-sizing: content-box;

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

4.1、elment.clientWidth/clientHeight

描述:计算如下,

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

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

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

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

  1. // 有滚动条=>paddingLeftWidth+width+paddingRightWidth-scrollYWidth
  2. // 无滚动条=>paddingLeftWidth+width+paddingRightWidth
  3. alert(oDemo.clientWidth);
  4. // 有滚动条=>60+100+60-17=203
  5. // 无滚动条=>60+100+60=220
  6. // 有滚动条=>paddingTopWidth+height+paddingBottomWidth-scrollYHeight
  7. // 无滚动条=>paddingTopWidth+height+paddingBottomWidth
  8. alert(oDemo.clientHeight);
  9. // 有滚动条=>60+100+60-17=203
  10. // 无滚动条=>60+100+60=220

4.2、element.clientLeft/clientTop

描述:clientLeft为左边框宽度,clientTop为上边框宽度。

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

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

  1. // borderLeftWidth
  2. alert(oDemo.clientLeft);
  3. // =>50
  4. // borderTopWidth
  5. alert(oDemo.clientTop);
  6. // =>50

4.3、element.offsetWidth/offsetHeight

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

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

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

  1. // borderLeftWidth+paddingLeftWidth+width+paddingRightWidth+borderRightWidth
  2. alert(oDemo.offsetWidth);
  3. // =>50+60+100+60+50=320
  4. // borderTopWidth+paddingLeftWidth+width+paddingRightWidth+borderRightWidth
  5. alert(oDemo.offsetWidth);
  6. // =>50+60+100+60+50=320

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,滚动条的宽度因系统不同而不同):

  1. // 以最近的定位祖先元素为准
  2. // 谷歌=>parentBorderLeftWidth+parentPaddingLeftWidth+left+marginLeft
  3. // 其他=>parentPaddingLeftWidth+left+marginLeft
  4. alert(oDemo.offsetLeft);
  5. // chrome=>20+10+80+70=180
  6. // ie6/7/8/9/10/firefox=>160
  7. // 以最近的定位祖先元素为准
  8. // 谷歌=>parentBorderTopWidth+parentPaddingTopWidth+left+marginLeft
  9. // 其他=>parentBorderTopWidth+left+marginLeft
  10. alert(oDemo.offsetLeft);
  11. // chrome=>20+10+80+70=180
  12. // ie6/7/8/9/10/firefox=>160

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):

  1. // 有滚动条=paddingLeftWidth+contentWidth
  2. // 有滚动条(ie6/7)=paddingLeftWidth+contentWidth+paddingRightWidth
  3. // 无滚动条=paddingLeftWidth+width+paddingRightWidth
  4. alert(oDemo.scrollWidth);
  5. // 有滚动条=>200+60=260
  6. // 有滚动条(ie6/7)=>200+60+60=320
  7. // 无滚动条=>100+60+60=220
  8. // 有滚动条=paddingTopWidth+contentWidth
  9. // 有滚动条(ie6/7)=paddingTopWidth+contentWidth+paddingBottomWidth
  10. // 无滚动条=paddingTopWidth+width+paddingBottomWidth
  11. alert(oDemo.scrollHeight);
  12. // 有滚动条=>60+200=260
  13. // 有滚动条(ie6/7)=>60+200+60=320
  14. // 无滚动条=>60+100+60=220

4.6、element.scrollLeft/scrollTop

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

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

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


  1. document.onclick=function(){
  2. // 水平滚动条左距离
  3. alert(oDemo.scrollLeft);
  4. // 垂直滚动条上距离
  5. alert(oDemo.scrollTop);
  6. }

5、总结

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

屏幕宽度:window.screen.width。

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

元素内容宽度:element.clientWidth。

元素占位宽度:element.offsetWidth。

元素相对位置:无。

JS中各种宽度距离小结的更多相关文章

  1. 20190430-screen、client、offset、scroll等JS中各种宽度距离

    参考文献: JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

  2. JS中各种宽度、高度、位置、距离总结

    1.window.screen 浏览器与屏幕的距离,screenX(screenLeft),screenY(screenTop) 2.window.scrollTo(x,y) 将纵向滚动条移动到相对于 ...

  3. js中各种宽度高度总结

    offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变 IE6.0.FF1.06+:offsetWidth = width + padding + borderoffsetH ...

  4. Js 中一系列宽度和高度的学习

    在学习元素一系列宽度和高度之前,我们先来看一个平时开发中几乎不会遇到的问题,那就是html文档声明<!DOCTYPE html> 确实会对元素的宽高产生影响.几乎不会遇到,是因为我们在写h ...

  5. js中document的用法小结

    document常用属性: document.title//设置文档标题,与HTNL中的title标签等价 document.bgColor//设置页面背景颜色 document.fgColor//设 ...

  6. js中 的这些距离你知道吗?

  7. js,jQuery数组常用操作小结

    一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift() ...

  8. js中高度与宽度的获取

    JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...

  9. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

随机推荐

  1. JDK中的Atomic包中的类及使用

    引言 Java从JDK1.5开始提供了java.util.concurrent.atomic包,方便程序员在多线程环境下,无锁的进行原子操作.原子变量的底层使用了处理器提供的原子指令,但是不同的CPU ...

  2. vue学习笔记2

    Vue.js - Day2 品牌管理案例 添加新品牌 删除品牌 根据条件筛选品牌 1.x 版本中的filterBy指令,在2.x中已经被废除: filterBy - 指令 <tr v-for=& ...

  3. python maximum recursion depth exceeded 处理办法

    1.在执行命令 pyinstaller -F D:\py\programe\banksystem.py打包生成.exe文件时报错:python maximum recursion depth exce ...

  4. Openresty编写Lua代码一例

    1.前段时间纠结了很久,一直弄不清lua和tomcat的联系.一直认为是lua调用tomcat的接口才可使用,后面才明白过来,进入了一个误区,lua本身就是一门独立的脚本语言.在openresty里面 ...

  5. 微信小程序初体验,入门练手项目--通讯录,部署上线(二)

    接上一篇<微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器>:https://www.cnblogs.com/chengxs/p/9898670.html 开发微信小程序最尴尬 ...

  6. 轻量级数据库Sqlite的使用

    SqLite是什么? SQLite是一个进程内的库,实现了自给自足的.无服务器的.零配置的.事务性的 SQL 数据库引擎.它是一个零配置的数据库,这意味着与其他数据库一样,您不需要在系统中配置. 就像 ...

  7. Linux+.Net Core+Nginx(在Linux上使用Nginx反向代理.Net Core 项目)

    Linux+.Net Core+Nginx 之前的文章中有提到关于使用Nginx在linux来实现反向代理,今天我们继续加点料.在Centos7中部署.NetCore,然后使用Nginx进行反向代理! ...

  8. SmartSql 介绍

    介绍 SmartSql = MyBatis + Cache(Memory | Redis) + R/W Splitting +Dynamic Repository + Diagnostics .... ...

  9. 痞子衡嵌入式:高性能MCU之Media应用开发那些事 - 索引

    大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是高性能MCU之Media应用开发相关知识. 飞思卡尔半导体(现恩智浦半导体)2017年推出的i.MX RT系列第一款芯片i.MXRT1 ...

  10. IntelliJ IDEA下如何设置JSP模板

    今天在学习Spring MVC知识时,发现自己所用的IntelliJ IDEA中自动生成的JSP文件不支持EL表达式的使用,所以就想导入新的JSP模板,方便以后使用.根据旧模板的提示,如下图 找到Se ...