scrollTop、offsetTop、clientTop
1.offsetTop:
obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置。
2.clientTop:
这个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0。
3.scrollTop:
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (即网页被卷去的高)
如果元素是可以滚动的,可以通过这俩个属性得到元素在垂直方向上滚动了多远,单位是象素。
对于不可以滚动的元素,这些值总是0。
scrollTop、offsetTop、clientTop的更多相关文章
- jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...
- clientTop、clientWidth、offsetTop、offsetWidth、scrollTop
<div id="drag" class="drag">drag me</div> <script type="text ...
- clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
clientHeight:包括padding但不包括border.水平滚动条.margin的元素的高度.对于inline的元素这个属性一直是0,单位px,只读元素. offsetHeight:包括pa ...
- 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度.滚动.位置相关的属性,单凭单词很难搞清楚分 ...
- offsetleft、offsetTop、offsetParent的兼容性问题
先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...
- offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight
w3c规范,请戳这里:http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent 一.offsetParent 英文解读: part o ...
- 简单理解offsetleft、offsetTop、offsetParent
先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...
- js中的scrollTop、offsetTop、clientTop
scrollHeight:获取对象可滚动的高度. scrollWidth:获取对象可滚动的宽度. scrollTop:获取对象最顶端与对象可见区域最顶端的距离. scrollLeft:获取对象左边界与 ...
- JS-scrollTop、scrollHeight、clientTop、clientHeight、offsetTop、offsetHeight的理解
scrollTop, 可写(这些属性中唯一一个可写的元素) Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数. 一个元素的 scrollTop 值是这个元素的顶部到 ...
随机推荐
- js与原生的交互
一.与安卓的交互 Android与js通过WebView互相调用方法,实际上是: Android去调用JS的代码 JS去调用Android的代码 二者沟通的桥梁是WebView 对于android调用 ...
- LINQ体验(7)——LINQ to SQL语句之Group By/Having和Exists/In/Any/All/Contains
我们继续讲解LINQ to SQL语句,这篇我们来讨论Group By/Having操作符和Exists/In/Any/All/Contains操作符. Group By/Having操作符 适用场景 ...
- kafka实时流数据架构
初识kafka https://www.cnblogs.com/wenBlog/p/9550039.html 简介 Kafka经常用于实时流数据架构,用于提供实时分析.本篇将会简单介绍kafka以及它 ...
- css画三角的原理
当我们设置一个div其width与height为100px,并且设置其四边框的宽度为100px,且分别设置其颜色后,我们可以看到如下的一张图片 此时如果设置这个div的height为0的话,其他不变, ...
- Bootstrap Notify
https://github.com/mouse0270/bootstrap-notify $.notify('Hello World', { offset: { x: 50, y: 100 } }) ...
- Hibernate 4.3.7 可编程方式+注解
1.复制jar文件到lib antlr-2.7.7.jardbmysql.jardboracle.jardbsqljdbc2005.jardom4j-1.6.1.jarhibernate-common ...
- Mac系统下源码编译安装MySQL 5.7.17
1.下载并解压到:/Users/xiechunping/Softwares/mysql-5.7.17下载地址:http://ftp.ntu.edu.tw/pub/MySQL/Downloads/MyS ...
- E20180405-hm
tutorial n. 个别辅导时间; 教程,辅导材料; 使用说明书; 辅导课; adj. 导师的; 私人教师的; 辅导的; track n. 小路,小道; 痕迹,踪迹; 轨道,音轨; 方针,路线 ...
- 洛谷 - P1309 - 瑞士轮 - 归并排序
https://www.luogu.org/problemnew/show/P1309 一开始写的直接快排没想到真的TLE了. 想到每次比赛每个人前移的量不会很多,但是不知从哪里开始优化. 搜索一下原 ...
- SQL语句合集
UNION (合并) UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 S ...