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 相关文章推荐
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
vue项目实战总结篇
Feb 11 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 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
一个简易需要注册的留言版程序
2006/10/09 PHP
PHP比你想象的好得多
2014/11/27 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
分享php多功能图片处理类
2016/05/15 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
javascript 获取图片颜色
2009/04/05 Javascript
javascript动态加载三
2012/08/22 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
python类继承用法实例分析
2014/10/10 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
python 日期排序的实例代码
2019/07/11 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
玲玲的画教学反思
2014/02/04 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
司机工作自我鉴定
2014/09/19 职场文书
工作试用期自我评价
2015/03/10 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
工作失职检讨书范文
2015/05/05 职场文书
地雷战观后感
2015/06/09 职场文书
施工安全协议书
2016/03/22 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
Vue监视数据的原理详解
2022/02/24 Vue.js