offset() position() scrollTop() scrollLeft()
(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 像素坐标(亦即相对于当前窗口)。
- clientX 和x值在实验过程中,没有发现值不一样的例子,所以我认为它们在效果上是一样的!
- offsetX 是相对于当前窗口内,本触发事件对象(或者是某一区域)而言,如本例中你单击a区域,值是相对于a所在<td>区域而言,同理b,c,d都一样!
- clientX ,x,offsetX共同点:它们是相对位置,相对于当前窗口,只是offsetX相对于当前窗口的某个触发对象的父容器而言!
- 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()的更多相关文章
- 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 ...
- 一句话解释jquery中offset、pageX, pageY、position、scrollTop, scrollLeft的区别
offset 元素相对文档的偏移 pageX, pageY 事件(鼠标)相对文档的偏移 注意:文档是指document, 而不是当前窗口,是包含了滚动位置的,即滚动条的位置对这些值是不产生影响的 ...
- jQuery css,position,offset,scrollTop,scrollLeft用法
jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...
- JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft
这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度.高度以及上或左的距离偏移量. 1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度 ...
- 一文看懂js中元素的滚动大小(scrollWidth,scrollHeight,scrollTop,scrollLeft)
滚动大小(scroll dimension) 滚动大小指的是包含滚动内容元素的大小. 以下是与元素滚动内容大小相关的属性: 1. scrollWidth:在没有滚动条的情况下,元素内容的总宽度. 2. ...
- ☀【offset() / position()】
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- scrollTop,scrollLeft
document.body.scrollTop用法 网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可 ...
- jQuery之offset,position
获取/设置标签的位置数据 * offset(): 相对页面左上角的坐标 * position(): 相对于父元素左上角的坐标. 需求: 1. 点击 btn1 打印 div1 相对于页面左上角的位置 打 ...
- js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较
1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置positio ...
随机推荐
- 苹果Swift语言中文教程资源汇总
苹果swift语言中文教程(零)搭配环境以及代码执行成功http://vjiazhi.com/kaifa/1014.html 苹果Swift语言中文教程(一)基础数据类型 http://vjiazhi ...
- 利用 Composer 完善自己的 PHP 框架(一)——视图装载
本教程示例代码见 https://github.com/johnlui/My-First-Framework-based-on-Composer 回顾 经过了上一个 系列教程 <利用 Comp ...
- Android基本控件之ListView(二)<ListView优化>
之前我们说到ListView的基本用法.但是,有很多的时候会额外的占用一些内存,从而消耗了性能.既然有消耗性能的可能,那么我们就对其做出相应的优化 我们首先来说说优化的步骤: 第一步.将宽和高设置为填 ...
- Ubuntu配置ssh server
SSH-Server配置指南 一.SSH简介 SSH (Secure Shell)是一个应用程序中提供安全通信的协议,通过SSH协议可以安全地访问服务器,因为SSH 具有成熟的公钥加密体系,在数据进行 ...
- 实验教学管理系统 c语言程序代写源码下载
问题描述:实验室基本业务活动包括:实验室.班级信息录入.查询与删除:实验室预定等.试设计一个实验教学管理系统,将上述业务活动借助计算机系统完成. 基本要求: 1.必须存储的信息 (1)实验室信息:编号 ...
- yii2在ubuntu下执行定时任务
一.编辑yii console/controllers TestController.php 二./usr/ 包括与系统用户直接有关的文件和目录创建sh_scripts目录,/usr/sh_scrip ...
- LeetCode 274
H-Index Given an array of citations (each citation is a non-negative integer) of a researcher, write ...
- [需再总结]SSH整合代码生成器
package cn.itcast.invoice.util.generator; import java.io.BufferedWriter; import java.io.File; import ...
- 汇总#pragma用法
这几天忙着去复习了,但是心理总是不踏实,不到实验室里就觉得一天的生活变了个样,现在还是晚上来这里“搞起”吧,白天还是在复习准备考试.因为要开始学习freescale,准备明年的比赛了,觉得是时候开始搞 ...
- poj 3207 2-SAT问题
思路:将线段按开始点的升序排序,对线段尾节点进行判断,若存在交叉,那么这两条线段就不能同时在内或同时在外.这样将每条线段在内和在外看成两个状态i和i',i表示线段在内,i'表示线段在外.假使线段i和线 ...