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 相关文章推荐
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
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
如何开始收听短波广播
2021/03/01 无线电
PHP 上传文件大小限制
2009/07/05 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
python通过smpt发送邮件的方法
2015/04/30 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
python实现祝福弹窗效果
2019/04/07 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
应届毕业生求职信范文分享
2013/12/26 职场文书
有创意的广告词
2014/03/18 职场文书
施工安全生产承诺书
2014/05/23 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
公司借条范本
2015/05/25 职场文书