当要做一些与位置相关的插件或效果的时候,像top、clientTop、scrollTop、offsetTop、scrollHeight、clientHeight、offsetParent。。。看到这么多单词,而且长得那么像,是不是懵X了!

第一次看到这图,说实话有点被吓到。。。

============================分割线======================================

offsetParent:该属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为body元素的引用。 当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性 返回 null。

top:该属性一般对用过css定位的元素有效(position为“static”时为auto,不产生效果),定义了一个top属性有效的元素(即定位元素)的上外边距边界与其包含块上边界之间的偏移。

clientTop:元素上边框的厚度,当没有指定边框厚底时,一般为0。

scrollTop:位于对象最顶端和窗口中可见内容的最顶端之间的距离,简单地说就是滚动后被隐藏的高度。

offsetTop:获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。

clientHeight:内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

scrollHeight:IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

offsetHeight:获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)的高度。IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。offsetHeight在新版本的FF和IE中是一样的,表示网页的高度,与滚动条无关,chrome中不包括滚动条。

*诸如left、clientLeft、offsetLeft、clientWidth、scrollWidth等,和top、height类似,不再赘述。

============================分割线=====================================

clientX、clientY:相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。

pageX、pageY:类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。

offsetX、offsetY:相对于事件源元素(target或srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。

screenX、screenY:相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

来源:https://www.cnblogs.com/youziclub/p/4811069.html

js “top、clientTop、scrollTop、offsetTop…”的更多相关文章

  1. js中的各种“位置”——“top、clientTop、scrollTop、offsetTop……”,你知道多少

    当要做一些与位置相关的插件或效果的时候,像top.clientTop.scrollTop.offsetTop.scrollHeight.clientHeight.offsetParent...看到这么 ...

  2. js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版【转】

    之前在修改IE6下的一个显示bug时,查到过这些,贴这备忘,后面给出了详细说明,以前的版本,没仔细的说明,特希望大家也收藏下.   网页可见区域宽: document.body.clientWidth ...

  3. Js中 关于top、clientTop、scrollTop、offsetTop的用法

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  4. js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  5. 花点时间搞清top、clientTop、scrollTop、offsetTop

    [转贴]花点时间搞清top.clientTop.scrollTop.offsetTop   scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前 ...

  6. javascript中top、clientTop、scrollTop、offsetTop的讲解(转载加总结)

    scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...

  7. JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

    这里是javascript中制作滚动代码的常用属性 页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见 ...

  8. JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍(转载)

    这里是JavaScript中制作滚动代码的常用属性 页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见 ...

  9. offsetTop、clientTop、scrollTop、offsetTop

    好好看看下面那张图,基本上就没啥问题了! scrollHeight: 获取对象的滚动高度.  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop ...

随机推荐

  1. SpringMVC运行原理

    一.SpringMVC运行原理图 ​ 二.相关接口解释 DispatcherServlet接口: Spring提供的前端控制器,所有的请求都有经过它来统一分发.在DispatcherServlet将请 ...

  2. 2.supervisor实时监控程序存活状态

    1.supervisor是一款python开发的一个client/server服务,是一款进程管理工具,支持linux/unix系统,但是不支持windows系统. 它可以很方便的监听.启动.停止.重 ...

  3. Linux下环境变量设置的三种方法

    如想将一个路径加入到$PATH中,可以像下面这样做: 1.控制台中设置,不赞成这种方式,因为他只对当前的shell 起作用,换一个shell设置就无效了:$PATH="$PATH" ...

  4. mysql视图定义、原理、创建、使用

    定义: 视图是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据.但是视图并不在数据库中以存储的数据值集形式存在.行和列数据来自由定义视图的查询所引用的表,并在引用视图时 ...

  5. 关于手残,搞废我的OLED屏幕的 追悼会

    2017-12-1913:36:41 昨天按照B站的资料利用esp12F做了一个天气站,可预报天气,惭愧的是模型做好了,照片还没拍就夭折了,可怜了我20块的屏幕,我心伤悲,莫知我哀呀! 本来调试已经成 ...

  6. oracle 配置 自启动 和 关闭

    今天在看oracle自启动脚本,突然有点时间,总结一下!!! 第一次写博客,大家随便看看就好,有错误麻烦提醒下,不喜欢别喷,主要是锻炼自己,形成写博客的好习惯. 刚毕业,现在还没转正,在干运维和自学d ...

  7. java URL和URLConnection

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  8. IT 人士如何避免中年危机?

    今天咱们不谈技术,来聊点别的. 这也可能是比学习具体技术更重要的话题 - 投资. 我把投资分成两类: 投资股票.期货.现货.黄金这类常见投资品种. 投资自己.比如看书.学习.参加培训.当然<每天 ...

  9. Django的admin.py注册流程

    通常创建一个Django项目的时候,在Django的配置文件settings.py中,都会有下面的这段配置: INSTALLED_APPS = [ 'django.contrib.admin', 'd ...

  10. java配置context.xml文件

    2018-02-08   23:32:23 修改context.xml文件 自从学习了servlet后,每次修改里面的内容后,想要访问都要重启服务器,这样感觉很麻烦的,所以今天就教大家一个方法,只需要 ...