JS：screen/client/offset/scroll/inner/avail的width/left

最新推荐文章于 2023-04-28 08:30:00 发布
最新推荐文章于 2023-04-28 08:30:00 发布
阅读量597 收藏 2
点赞数
分类专栏： web

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浏览器的外边缘距离屏幕边缘的距离。

如图：

JS学习13：screen/client/offset/scroll/inner/avail的width/left

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

示例：


  
  
  1. alert(window.screenLeft);
  2. // ie=>87
  3. // chrome=>86
  4. // firefox=>undefined
  5.  
  6. alert(window.screenTop);
  7. // ie=>87
  8. // chrome=>86
  9. // 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.  
  6. alert(window.screenY);
  7. // chrome/firefox=>86
  8. // ie9/10=>79
  9. // 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.  
  7. 	alert(window.scrollY);
  8. 	// chrome=>200
  9. 	// firefox=>200
  10. 	// ie6/7/8/9/10=>undefined
  11. };

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，滚动条的宽度因系统不同而不同）：

JS学习13：screen/client/offset/scroll/inner/avail的width/left


  
  
  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.  
  7. // 有滚动条=>paddingTopWidth+height+paddingBottomWidth-scrollYHeight
  8. // 无滚动条=>paddingTopWidth+height+paddingBottomWidth
  9. alert(oDemo.clientHeight);
  10. // 有滚动条=>60+100+60-17=203
  11. // 无滚动条=>60+100+60=220

4.2、element.clientLeft/clientTop

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

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

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

JS学习13：screen/client/offset/scroll/inner/avail的width/left


  
  
  1. // borderLeftWidth
  2. alert(oDemo.clientLeft);
  3. // =>50
  4.  
  5. // borderTopWidth
  6. alert(oDemo.clientTop);
  7. // =>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.  
  5. // borderTopWidth+paddingLeftWidth+width+paddingRightWidth+borderRightWidth
  6. alert(oDemo.offsetWidth);
  7. // =>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. // 以最近的定位祖先元素为准
  9. // 谷歌=>parentBorderTopWidth+parentPaddingTopWidth+left+marginLeft
  10. // 其他=>parentBorderTopWidth+left+marginLeft
  11. alert(oDemo.offsetLeft);
  12. // chrome=>20+10+80+70=180
  13. // 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.  
  9. // 有滚动条=paddingTopWidth+contentWidth
  10. // 有滚动条(ie6/7)=paddingTopWidth+contentWidth+paddingBottomWidth
  11. // 无滚动条=paddingTopWidth+width+paddingBottomWidth
  12. alert(oDemo.scrollHeight);
  13. // 有滚动条=>60+200=260
  14. // 有滚动条(ie6/7)=>60+200+60=320
  15. // 无滚动条=>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. 	// 垂直滚动条上距离
  6. 	alert(oDemo.scrollTop);
  7. }

5、总结

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

屏幕宽度：window.screen.width。

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

元素内容宽度：element.clientWidth。

元素占位宽度：element.offsetWidth。

元素相对位置：无。

文章来源（前端博客），

c_zw
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
screen.availWidth 与 window.innerWidth（浏览器窗口尺寸、可用屏幕尺寸）
dibengcheng6179的博客
01-23 824
Window 尺寸 有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explore...
一款定时/循环执行任务的绿色小软件
02-23
SCROLLLOCK TAB UP WIN ( ) ~ % ^ + 可参考下例重复发送某按键： {DEL 4} ;连续4次按下 DEL 键 {S 30} ;发送30个字符“S” +{TAB 4} ;连续4次按下 SHIFT+TAB ----------------------------------------------------...
网页Screen width、height、availWidth、availHeight属性
weixin_30546933的博客
09-22 215
*screen.width 　　功能：声明了显示浏览器的屏幕的宽度，以像素计。 　　语法：screen.width *screen.height 　　功能：声明了显示浏览器的屏幕的可用宽度，以像素计。 　　语法：screen.availWidth *screen.availWidth 　　功能：声明了显示浏览器的屏幕的可用宽度，以像素计。 　　语法：screen.a...
前端开发中获取各种高度宽度
老电影故事的博客
04-28 2552
前端开发中经常需要获取页面还有屏幕的高度和宽度进行计算,此文即介绍如何用 JavaScript 获取这些尺寸。
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offset
deng131的专栏
05-18 178
在html中，任何一个元素都有三个表示位置和大小的对象：client,offset和scroll，每个对象都有相应的 height，width,top,left属性，那么这些究竟有什么区别呢？ client属性是指一个元素直接可以看得到不包括边框的区域，所谓的直接可以看得到不包括边框是这样的概念：不包括滚动条占据的空间（实际上，如果出现了滚动条，元素的高度不会发生变化，clientH...
screen对象
weixin_30363509的博客
01-10 108
Screen 对象包含有关客户端显示屏幕的信息。 一、screen对象属性 availHeight 返回屏幕的高度（不包括Windows任务栏） availWidth 返回屏幕的宽度（不包括Windows任务栏） width 返回屏幕的总宽度 height 返回屏幕的总...
JS-scroll-around-the-slide-code.rar_JavaScript/JQuery_JavaScript_
08-11
使用原生JS实现左右循环滚动幻灯片效果的代码，简单易懂
PIC_Scroll-DISPLAY.zip_嵌入式/单片机/硬件编程_C/C++_
08-11
PIC BASED SCROLLING DISPLAY SCHEMATIC
三剑客：offset、client和scroll还傻傻分不清？
01-18
在学习前端的过程中，我们经常会碰到offset, client与scroll，所以我就把它们称作为‘三剑客’。 01 offset – 偏移量 定义：元素在屏幕上占用的所有的可见的空间。 元素可见的大小由其高度、宽度决定，包括所有内...
js中offset,client , scroll 三大元素知识点总结
10-16
在本篇文章里小编给大家整理了关于js 元素offset,client , scroll 三大系列总结，有需要的朋友们可以学习下。
关于js里面的一些距离和宽高
YaWen的博客
02-23 484
js中常用的获取距离以及宽高的方法1.document.documentElement.clientWidth; //获取当前浏览器内容宽度，不包含菜单栏，滚动条，浏览器边框 2.document.documentElement.clientHeight; //获取当前浏览器内容高度 3.screen.width; //获取电脑屏幕的分辨率宽度（与浏览器宽高无关） 4.screen.
window.screen.availWidth
weixin_58414196的博客
07-05 672
window.screen.availWidth
js得到屏幕宽高、页面宽高 (window.screen.availHeight)等
12-23 108
window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width 返回当前屏幕宽度(分辨率值) window.screen.height 返回当前屏幕高度(分辨率值) window.document.body.offsetHeight; 返回当前网...
js得到屏幕宽高、页面宽高 (window.screen.availHeight)
晓风揽月
01-11 5900
js得到屏幕宽高、页面宽高 (window.screen.availHeight) window.screen.availWidth          返回当前屏幕宽度(空白空间)  window.screen.availHeight         返回当前屏幕高度(空白空间)  window.screen.width                  返回当前屏幕宽度
width，availWidth，screenWidth,
kalinux的博客
09-12 1160
 $("#btn").offsetWidth                  返回元素自身宽度（不含border,padding)                    无px 单位  ; $("#btn").offsetLeft         对于利用position定位的，是它的left值         无px; $("#btn").style.width      返回元素自身宽度...
关于Screen.availWidth和Screen.availHeight
回忆独殇的专栏
04-29 1470
关于Screen.availWidth和Screen.availHeight获取高度的误区. Screen对象 Screen 对象包含有关客户端显示屏幕的信息。 availHeight返回显示屏幕的高度 (除 Windows 任务栏之外)。availWidth返回显示屏幕的宽度 (除 Windows 任务栏之外)。 如果需要包括任务栏的就需要使用screen.heigh
Screen width、height、availWidth、availHeight属性
小菜鸟的博客
11-12 1379
Screen width、height、availWidth、availHeight属性 screen.width 功能：声明了显示浏览器的屏幕的宽度，以像素计。 语法：screen.width screen.height 功能：声明了显示浏览器
关于Screen.availWidth和Screen.availHeight获取高度的误区.
weixin_34240657的博客
11-14 495
body{color:#303030;text-shadow:1px 1px 1px #d0d0d0;font: 400 12px "微软雅黑","宋体"} h1{color:#090909;} dl{border:1px #d7d7d7 solid;width:400px;padding:10px;background:-moz-linear-gradient(top,#f9f9f9,#...
获取屏幕宽高度与可视区域宽高度（availWidth、clientWidth、width、innerWidth）
weixin_30535167的博客
09-30 687
　　经常会遇到需要获取屏幕宽度、高度，可视区域宽度、高度等问题，也就常跟这几个打交道，一不小心，还真爱弄混淆了。 　　先来列举下这几个吧： 　　screen.availHeight、screen.availWidth； 　　screen.height、screen.width； 　　document.documentElement.clientWidth、document.document...
输入curl -XPOST -u username:password -H "Content-Type: application/json" -d '{ "query": { "match_all": {} } }' "http://localhost:9200/indexA/_search?scroll=1m&size=10000" | grep -oE '"key1":"[^"]+"' | cut -d":" -f2- | tr -d '"' > data.txt之后会显出全部的文档内容后就卡着不动了，该怎么解决
最新发布
07-12
2. 使用 scroll API 进行分页：Elasticsearch 的 scroll API 允许您以分页的方式检索大量数据。通过使用 scroll API，您可以获取第一页数据，并在后续请求中使用滚动标识符获取下一页数据。这样可以避免一次获取所有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值