JS 中的offset、scroll、client总结

2018-08-10 admin

经常碰到offset、scroll、client这几个关键字,每次都要各种实验,这里总结一下。

两张图镇楼,随时翻阅

clipboard.png

clipboard.png

1. offset

offset偏移,包括这个元素在文档中占用的所有显示宽度,包括滚动条、paddingborder,不包括overflow隐藏的部分

  1. offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的父级元素中最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。

    • 如果当前元素的父级元素中没有进行CSS定位(position为absolute/relative),offsetParent为body
    • 如果当前元素的父级元素中有CSS定位(position为absolute/relative),offsetParent取父级中最近的元素
  2. obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位:像素。 offsetWidth = border-width*2+padding-left+width+padding-right

  3. obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型,单位:像素。 offsetHeight = border-width*2+padding-top+height+padding-bottom

  4. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位:像素。 offsetTop= offsetParent的padding-top + 中间元素的offsetHeight + 当前元素的margin-top

  5. obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位:像素。 offsetLeft= offsetParent的padding-left + 中间元素的offsetWidth + 当前元素的margin-left

2. scroll

scroll滚动,包括这个元素没显示出来的实际宽度,包括padding,不包括滚动条、border

  1. scrollHeight 获取对象的滚动高度,对象的实际高度;
  2. scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
  3. scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
  4. scrollWidth 获取对象的滚动宽度

3. client

client指元素本身的可视内容,不包括overflow被折叠起来的部分,不包括滚动条、border,包括padding

  1. clientWidth 对象可见的宽度,不包括滚动条等边线,会随窗口的显示大小改变
  2. clientHeight 对象可见的高度
  3. clientTopclientLeft 这两个返回的是元素周围边框的厚度,一般它的值就是0。因为滚动条不会出现在顶部或者左侧

网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~

参考:

  1. javascript的offset、client、scroll的总结笔记
  2. <a>轻松弄清JavaScript中的offset、scroll、client</a>
  3. offset client scroll screen 关键字整理

原文链接:https://segmentfault.com/a/1190000015961743

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37700.html

文章标题:JS 中的offset、scroll、client总结

相关文章
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
AngularJS vs. jQuery,看看谁更胜一筹
很多Web开发新手都会有这样的疑问“我应该使用什么开发框架呢,如何快速学会Web开发呢?”这个问题其实没有一个统一的正确答案,其中讨论最多的就是AngularJS和jQuery的差别。这两者的之间的比较很微妙,有时就像拿苹果和橘子在作比较,...
2015-11-12
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
回到顶部