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

最新推荐文章于 2024-05-01 00:02:34 发布
最新推荐文章于 2024-05-01 00:02:34 发布
阅读量530 收藏
点赞数
分类专栏： jquery 文章标签： javascript 浏览器 对象

原文地址：http://caibaojian.com/js-name.html
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浏览器的外边缘距离屏幕边缘的距离。
如图：
这里写图片描述

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

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

示例：

alert(window.screenLeft);
// ie=>87
// chrome=>86
// firefox=>undefined

alert(window.screenTop);
// ie=>87
// chrome=>86
// 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。

示例：

alert(window.screenX);
// chrome/firefox=>86
// ie9/10=>79
// ie6/7/8=>undefined

alert(window.screenY);
// chrome/firefox=>86
// ie9/10=>79
// ie6/7/8=>undefined

2.5、window.pageXOffset/pageYOffset

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

兼容：ie9/10、chrome、firefox。

示例：

document.onclick=function(){
    alert(window.pageXOffset);
    // chrome=>200
    // firefox=>200
    // ie9/10=>200
    // ie6/7/8=>undefined
    alert(window.pageYOffset);
    // chrome=>200
    // firefox=>200
    // ie9/10=>200
    // ie6/7/8=>undefined
};

2.6、window.scrollX/scrollY

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

兼容：chrome、firefox。

示例：

document.onclick=function(){
    alert(window.scrollX);
    // chrome=>200
    // firefox=>200
    // ie6/7/8/9/10=>undefined

    alert(window.scrollY);
    // chrome=>200
    // firefox=>200
    // ie6/7/8/9/10=>undefined
};

3、screen

3.1、screen.width/height

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

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

示例（屏幕的分辨率为1440×900）：

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

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

3.2、screen.availWidth/availHeight

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

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

示例：

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

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，滚动条的宽度因系统不同而不同）：
这里写图片描述
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

// 有滚动条=>paddingLeftWidth+width+paddingRightWidth-scrollYWidth
// 无滚动条=>paddingLeftWidth+width+paddingRightWidth
alert(oDemo.clientWidth);
// 有滚动条=>60+100+60-17=203
// 无滚动条=>60+100+60=220

// 有滚动条=>paddingTopWidth+height+paddingBottomWidth-scrollYHeight
// 无滚动条=>paddingTopWidth+height+paddingBottomWidth
alert(oDemo.clientHeight);
// 有滚动条=>60+100+60-17=203
// 无滚动条=>60+100+60=220

4.2、element.clientLeft/clientTop

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

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

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

这里写图片描述

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

// borderLeftWidth
alert(oDemo.clientLeft);
// =>50

// borderTopWidth
alert(oDemo.clientTop);
// =>50

4.3、element.offsetWidth/offsetHeight

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

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

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

// borderLeftWidth+paddingLeftWidth+width+paddingRightWidth+borderRightWidth
alert(oDemo.offsetWidth);
// =>50+60+100+60+50=320

// borderTopWidth+paddingLeftWidth+width+paddingRightWidth+borderRightWidth
alert(oDemo.offsetWidth);
// =>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，滚动条的宽度因系统不同而不同）：

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

// 以最近的定位祖先元素为准
// 谷歌=>parentBorderTopWidth+parentPaddingTopWidth+left+marginLeft
// 其他=>parentBorderTopWidth+left+marginLeft
alert(oDemo.offsetLeft);
// chrome=>20+10+80+70=180
// 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）：

// 有滚动条=paddingLeftWidth+contentWidth
// 有滚动条(ie6/7)=paddingLeftWidth+contentWidth+paddingRightWidth
// 无滚动条=paddingLeftWidth+width+paddingRightWidth
alert(oDemo.scrollWidth);
// 有滚动条=>200+60=260
// 有滚动条(ie6/7)=>200+60+60=320
// 无滚动条=>100+60+60=220

// 有滚动条=paddingTopWidth+contentWidth
// 有滚动条(ie6/7)=paddingTopWidth+contentWidth+paddingBottomWidth
// 无滚动条=paddingTopWidth+width+paddingBottomWidth
alert(oDemo.scrollHeight);
// 有滚动条=>60+200=260
// 有滚动条(ie6/7)=>60+200+60=320
// 无滚动条=>60+100+60=220

4.6、element.scrollLeft/scrollTop

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

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

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

document.onclick=function(){
    // 水平滚动条左距离
    alert(oDemo.scrollLeft);

    // 垂直滚动条上距离
    alert(oDemo.scrollTop);
}

5、总结

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

屏幕宽度：window.screen.width。

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

元素内容宽度：element.clientWidth。

元素占位宽度：element.offsetWidth。

元素相对位置：无。

zerlinda_c
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS-scroll-around-the-slide-code.rar_JavaScript/JQuery_JavaScript_
08-11
使用原生JS实现左右循环滚动幻灯片效果的代码，简单易懂
JavaScript概念之screen/client/offset/scroll/inner/avail的width/left ...
weixin_33819479的博客
05-27 56
原文地址：http://caibaojian.com/js-name.htmlJS中获取各种宽度和距离，常常让我们混淆，各种浏览器的不兼容让我们很头疼，现在就在说说js中有哪些宽度和距离。1、名词解释screen：屏幕。这一类取到的是关于屏幕的宽度和距离，与浏览器无关，应该是获取window对象的属性。client：使用区、客户区。指的是客户区，当然是指浏览器区域。offset：偏移。指的是目...
20190430-screen、client、offset、scroll等JS中各种宽度距离
weixin_30357231的博客
04-30 63
参考文献： JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 转载于:https://www.cnblogs.com/nightnight/p/10795215.html
javaScript 高级程序设计第4版通读第二遍
Michael_Hzs的博客
03-18 450
javaScript第四版通读第二遍： 第一章：什么是JavaScript js组成部分： 核心（ECMAScript）： 即ECMA-262定义的语言，但不局限于浏览器。他包含了以下部分：语法、类型、关键字、保留字、操作符、全局对象。 文档对象模型（DOM）： 应用编程接口（API），用于在HTML中使用扩展的XML。 浏览对象模型（BOM）： 浏览器对象模型 第二章：HTML中的javaScript script元素属性： 属性名 描述 async 表示异步，意思是
前端学习day19-DOM：元素的尺寸，简易轮播图的实现
qq_45926448的博客
07-07 57
元素的尺寸，简易轮播图的实现
PIC_Scroll-DISPLAY.zip_嵌入式/单片机/硬件编程_C/C++_
08-11
PIC BASED SCROLLING DISPLAY SCHEMATIC
一款定时/循环执行任务的绿色小软件
02-23
SCROLLLOCK TAB UP WIN ( ) ~ % ^ + 可参考下例重复发送某按键： {DEL 4} ;连续4次按下 DEL 键 {S 30} ;发送30个字符“S” +{TAB 4} ;连续4次按下 SHIFT+TAB ----------------------------------------------------...
Javascript模拟scroll滚动效果脚本第1/2页
10-30
项目需要写了一段模拟Scroll滚动代码，分享的同时，我有些疑问，希望大家能帮忙解决，代码如下
javascript中offset、client、scroll的属性总结
10-23
主要介绍了javascript中offset、client、scroll的属性总结的相关资料,需要的朋友可以参考下
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 658
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 769
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
飞云先生
04-30 41
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
前端Vue2项目搭建过程
xuemen11的博客
04-25 1220
vue2,vuex,vant组件库
[email protected]使用懒加载
weixin_44072254的博客
04-25 214
【代码】[email protected]使用懒加载。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 196
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
CSR、SSR与同构渲染全方位解析
Allen-
04-26 1468
现代Web应用的核心渲染方式——客户端渲染（CSR）、服务器端渲染（SSR）以及同构渲染。接下来我们将通过对比它们的原理、应用场景、优缺点及实际案例，深入了解如何根据项目需求选择合适的渲染策略。
小区服务|基于SprinBoot+vue的小区服务管理系统(源码+数据库+文档)
最新发布
weixin_66413741的博客
05-01 458
这次开发的小区服务管理系统对安保管理、安保分配管理、客服聊天管理、字典管理、房屋管理、反馈管理、论坛管理、公告管理、反馈处理管理、住户管理、员工管理、管理员管理等进行集中化处理。经过前面自己查阅的网络知识，加上自己在学校课堂上学习的知识，决定开发系统选择B/S模式这种高效率的模式完成系统功能开发。这种模式让操作员基于浏览器的方式进行网站访问，采用的主流的Java语言这种面向对象的语言进行小区服务管理系统程序的开发，在数据库的选择上面，选择功能强大的Mysql数据库进行数据的存放操作。
redux快速入门
qq_73270720的博客
04-29 264
简单的加减案例,学会redux快速入门
lodsah/debounce 使用
09-08
lodsah/debounce 是一个 JavaScript 库，用于控制调用某个函数的频率。它可以防止函数在短时间内多次被触发，从而避免函数的过度执行，提高性能和用户体验。 debounce 的用法非常简单。首先，需要引入 lodsah/...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值