javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法


Posted in Javascript onMay 14, 2020

关于js中的offsetWidth、clientWidth、scrollWidth等一系列属性及其方法一直都傻傻分不清,这里就来总结一下这些方法的用法和含义。

一、clientWidth和clientHeigh 、 clientTop和clientLeft

1,clientWidth的实际宽度
clientWidth = width+左右padding

2,clientHeigh的实际高度
clientHeigh = height + 上下padding 

3,clientTop的实际宽度
clientTop = boder.top(上边框的宽度)

4,clientLeft的实际宽度
clientLeft = boder.left(左边框的宽度)

二、offsetWidth和offsetHight 、 offsetTop和offsetLeft

1,offsetWidth的实际宽度
offsetWidth = width + 左右padding + 左右boder

2,offsetHeith的实际高度
offsetHeith = height + 上下padding + 上下boder

3,offsetTop实际宽度
offsetTop:当前元素 上边框 外边缘 到 最近的已定位父级(offsetParent) 上边框 内边缘的 距离。如果父级都没有定位,则分别是到body 顶部 和左边的距离

4,offsetLeft实际宽度
offsetLeft:当前元素 左边框 外边缘 到 最近的已定位父级(offsetParent) 左边框 内边缘的            距离。如果父级都没有定位,则分别是到body 顶部 和左边的距离

三、scrollWidth和scrollHeight 、 scrollTop和scrollLeft

1,scrollWidth实际宽度
scrollWidth:获取指定标签内容层的真实宽度(可视区域宽度+被隐藏区域宽度)。

2,scrollHeight的实际高度
scrollHeight:获取指定标签内容层的真实高度(可视区域高度+被隐藏区域高度)

3,scrollTop
scrollTop :内容层顶部 到 可视区域顶部的距离。
实例:var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;持续获取高度的方式:

window.addEventListener('scroll', ()=>{
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
});

4,scrollLeft
scrollLeft:内容层左端 到 可视区域左端的距离.

注意: 下面元素属性和元素方法都通过 elem.属性 或 elem.方法 的方式使用,window属性通过 window.属性 的方式使用,document属性则通过document调用。

<script>
  /*
   ****** 元素视图属性
   * offsetWidth 水平方向 width + 左右padding + 左右border-width
   * offsetHeight 垂直方向 height + 上下padding + 上下border-width
   * 
   * clientWidth 水平方向 width + 左右padding
   * clientHeight 垂直方向 height + 上下padding
   * 
   * offsetTop 获取当前元素到 定位父节点 的top方向的距离
   * offsetLeft 获取当前元素到 定位父节点 的left方向的距离
   * 
   * scrollWidth 元素内容真实的宽度,内容不超出盒子高度时为盒子的clientWidth
   * scrollHeight 元素内容真实的高度,内容不超出盒子高度时为盒子的clientHeight
   * 
   ****** 元素视图属性结束
   * 
   ****** Window视图属性(低版本IE浏览器[<IE9]不支持) 【自测包含滚动条,但网络教程都说不包含???】
   * innerWidth 浏览器窗口可视区宽度(不包括浏览器控制台、菜单栏、工具栏) 
   * innerHeight 浏览器窗口可视区高度(不包括浏览器控制台、菜单栏、工具栏)
   * ***** Window视图属性结束
   * 
   ****** Document文档视图
   * (低版本IE的innerWidth、innerHeight的代替方案)
   * document.documentElement.clientWidth 浏览器窗口可视区宽度(不包括浏览器控制台、菜单栏、工具栏、滚动条)
   * document.documentElement.clientHeight 浏览器窗口可视区高度(不包括浏览器控制台、菜单栏、工具栏、滚动条)
   * 
   * document.documentElement.offsetHeight 获取整个文档的高度(包含body的margin)
   * document.body.offsetHeight 获取整个文档的高度(不包含body的margin)
   * 
   * document.documentElement.scrollTop 返回文档的滚动top方向的距离(当窗口发生滚动时值改变)
   * document.documentElement.scrollLeft 返回文档的滚动left方向的距离(当窗口发生滚动时值改变)
   ****** Document文档视图结束
   * 
   ****** 元素方法
   * 1. getBoundingClientRect() 获取元素到body
   * bottom: 元素底边(包括border)到可视区最顶部的距离
   * left: 元素最左边(不包括border)到可视区最左边的距离
   * right: 元素最右边(包括border)到可视区最左边的距离
   * top: 元素顶边(不包括border)到可视区最顶部的距离
   * height: 元素的offsetHeight
   * width: 元素的offsetWidth
   * x: 元素左上角的x坐标 
   * y: 元素左上角的y坐标 
   * 
   * 2. scrollIntoView() 让元素滚动到可视区
   * 
   * ***** 元素方法结束
   * 
   */
</script>

上面属性中,关于 window.innerWidth 和 window.innerHeight, 我自己测试的结果值是包含滚动条的,但网上的教程和相关文档都说不包括滚动条,虽然滚动条的宽度不大,对整体影响也不明显,但如果有道友有准确答案的,还请不吝赐教,顺手留个言,谢谢!

到此这篇关于javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法的文章就介绍到这了,更多相关javascript offsetWidth clientWidth innerWidth内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
文档对象模型DOM通俗讲解
Nov 01 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
Vuex简单入门
Apr 19 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
vue组件系列之TagsInput详解
May 14 #Javascript
ant-design-vue按需加载的坑的解决
May 14 #Javascript
JavaScript数组排序功能简单实现
May 14 #Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 #Javascript
Node.js API详解之 Error模块用法实例分析
May 14 #Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 #Javascript
JavaScript, select标签元素左右移动功能实现
May 14 #Javascript
You might like
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
php循环输出数据库内容的代码
2008/05/24 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
python opencv检测目标颜色的实例讲解
2018/04/02 Python
python绘制热力图heatmap
2020/03/23 Python
python爬取网易云音乐评论
2018/11/16 Python
python版本五子棋的实现代码
2018/12/11 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
Python中Unittest框架的具体使用
2019/08/27 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
pandas数据拼接的实现示例
2020/04/16 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
管道维修工岗位职责
2013/12/27 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
医生辞职信范文
2015/03/02 职场文书
升学宴来宾致辞
2015/07/27 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript