(1)offset:获取当前元素相对于文档的高度。只对可见元素有效。

  不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移

(2) position:获取元素相对于最近的一个position为relative or absolute的元素的祖父节点的相对偏移。

  事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置,如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移

(3)scrollTop/scrollLeft:是分别获取元素滚动条距顶端的距离。

---------------------------------------------------------------------------------------------------------------------------------------

offsetLeft,scrollLeft,offsetTop,scrollTop等等的用法

clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。 
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。 
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。 
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。

    1. clientX 和x值在实验过程中,没有发现值不一样的例子,所以我认为它们在效果上是一样的!
    2. offsetX 是相对于当前窗口内,本触发事件对象(或者是某一区域)而言,如本例中你单击a区域,值是相对于a所在<td>区域而言,同理b,c,d都一样!
    3. clientX ,x,offsetX共同点:它们是相对位置,相对于当前窗口,只是offsetX相对于当前窗口的某个触发对象的父容器而言!
    4. screenX是相对与客户端显示器而言,是绝对位置

1,scrollHeight: 获取对象的滚动高度,对象的实际高度;

2,scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

3,scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

4,scrollWidth:获取对象的滚动宽度

5,offsetHeight:获取对象相对由父坐标 offsetParent 属性指定的父坐标的高度

6,offsetLeft:获取当前对象到其上级层左边的距离.

7,offsetTop:获取当前对象到其上级层顶部的距离.

8,event.clientX 相对文档的水平座标

9,event.clientY 相对文档的垂直座标

10,event.offsetX 相对容器的水平坐标

11,event.offsetY 相对容器的垂直坐标

12,document.documentElement.scrollTop 垂直方向滚动的值

13,event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

14,clientLeft   返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离

offset() position() scrollTop() scrollLeft()的更多相关文章

  1. pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y

    event.pageX get mouse position Description: The mouse position relative to the left edge of the docu ...

  2. 一句话解释jquery中offset、pageX, pageY、position、scrollTop, scrollLeft的区别

    offset   元素相对文档的偏移 pageX, pageY 事件(鼠标)相对文档的偏移 注意:文档是指document, 而不是当前窗口,是包含了滚动位置的,即滚动条的位置对这些值是不产生影响的 ...

  3. jQuery css,position,offset,scrollTop,scrollLeft用法

    jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...

  4. JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft

    这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度.高度以及上或左的距离偏移量. 1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度 ...

  5. 一文看懂js中元素的滚动大小(scrollWidth,scrollHeight,scrollTop,scrollLeft)

    滚动大小(scroll dimension) 滚动大小指的是包含滚动内容元素的大小. 以下是与元素滚动内容大小相关的属性: 1. scrollWidth:在没有滚动条的情况下,元素内容的总宽度. 2. ...

  6. ☀【offset() / position()】

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  7. scrollTop,scrollLeft

    document.body.scrollTop用法 网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可 ...

  8. jQuery之offset,position

    获取/设置标签的位置数据 * offset(): 相对页面左上角的坐标 * position(): 相对于父元素左上角的坐标. 需求: 1. 点击 btn1 打印 div1 相对于页面左上角的位置 打 ...

  9. js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较

    1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置positio ...

随机推荐

  1. git 提交远程

    一.从远程克隆项目,修改后提交 1.先切换要放项目的本地目录 C:\Users\chendd>cd E:\web C:\Users\chendd>e: 2.根据服务器的git地址克隆到本地 ...

  2. Oracle数据库的导入与导出

    导出 在命令行输入"exp",回车即可访问指定的数据库, 我这里需要访问远程的数据库,所以带上了IP.端口等一些参数,具体的参数详情可以输入"exp -help" ...

  3. eclipse ctrl+左击不能关联相应文件

    <?xml version="1.0" encoding="UTF-8"?><projectDescription> <name& ...

  4. Linux vi编辑器

    vim在内存缓冲区中处理数据 如果在启动vim时未指定文件名,或者这个文件不存在,vim会新开一段缓冲区来编辑. h 左移一个字符 j 下移一行 k 上移一行 l 右边移一个字符 PageDown(C ...

  5. 英文破折号(em dash)、连接号(en dash)与连字符(hyphen)的区别及各自用法是什么?

    英文破折号(em dash).连接号(en dash)与连字符(hyphen)的区别及各自用法是什么?在科技写作中有何特点?   2 条评论 分享   按票数排序按时间排序 6 个回答 赞同85反对, ...

  6. cmd运行java,含传参,引用jar

    1,创建一个java project,完成编码 在Eclipse的资源管理器中选中你要打包的项目,右键点击,选择“导出”项,弹出导出对话框,在下面的Java目录下选择“JAR 文件”项,下一步,在导出 ...

  7. Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换

    Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 上一篇我们说到了使用jquer ...

  8. CF Vitaly and Strings

    Vitaly and Strings time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  9. hdu 4635 强连通度缩点

    思路:想用Tarjan算法进行缩点,并记录每个连通分支的点数.缩点完毕过后,找出所有出度或入度为0的连通分量,假设该连通分量的点数为num[i],那么 ans=Max(ans,(n-num-1)*(n ...

  10. Git CMD - checkout: Switch branches or restore working tree files

    命令格式 git checkout [-q] [-f] [-m] [<branch>] git checkout [-q] [-f] [-m] --detach [<branch&g ...