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 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 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
php计算程序运行时间的简单例子分享
2014/05/10 PHP
php新建文件的方法实例
2019/09/26 PHP
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
django如何连接已存在数据的数据库
2018/08/14 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
python利用7z批量解压rar的实现
2019/08/07 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
python 线程的五个状态
2020/09/22 Python
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
大学生自我鉴定书
2014/03/24 职场文书
个人培训自我鉴定
2014/03/28 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
企业理念标语
2014/06/09 职场文书
标准版离职证明书
2014/09/12 职场文书
车间主任岗位职责
2015/02/03 职场文书
居委会工作总结2015
2015/05/18 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
python保存图片的四个常用方法
2022/02/28 Python