深入理解offsetTop与offsetLeft
做为走上前端不归路的我，以前只是认为offsetTop是元素的左边框至包含元素offsetParent的左内边框之间的像素距离，同理offsetRight是相对于上内边框。那么问题来了，包含元素offsetParent究竟是谁呢？
是我太天真还是天后知后觉！
其实：
页面中的元素的offsetLeft是离其最近的已经定位的元素，如果没有就相对于body元素计算。例如:
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background: red;
}
#box2{
width: 50px;
height: 50px;
background: green;
margin: 0 auto;
}
</style>
<div class="box1">
<div id="box2"> </div>
</div>
<script type="text/javascript">
var box2 = document.getElementById('box2');
alert(box2.offsetParent.tagName);//输出BODY
alert(box2.offsetLeft);//输出从33
</script>
此时id为box2的div元素的祖先元素中没有已经定位的元素，所以box2的offsetLeft是相对于body元素计算所得的。
下面我们将上面的代码做如下修改
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background: red;
position:relative;
}
#box2{
width: 50px;
height: 50px;
background: green;
margin: 0 auto;
}
</style>
<div class="box1">
<div id="box2"> </div>
</div>
<script type="text/javascript">
var box2 = document.getElementById('box2');
alert(box2.offsetParent.tagName);//输出DIV
alert(box2.offsetLeft);//输出从25
</script>
offsetTop同理。
通过查阅资料我还发现 IE6,IE7 对offsetParent解释有BUG，当祖先元素都不是定位元素且本身是定位元素的时候返回document.documentElement，其他情况终返回document.body：
<body>
<div id="b" style="position:relative">
<div id="a"></div>
</div><!-- a.offsetParent返回b -->
<div id="d">
<div id="c"></div>
</div><!-- c.offsetParent返回document.body -->
<div id="f">
<div id="e" style="position:relative"></div>
</div><!-- e.fsetParent返回document.body 在ie6,ie7中返回document.documentElement -->
</body>
深入理解offsetTop与offsetLeft的更多相关文章
- offsetTop、offsetLeft、offsetWidth、offsetHeight的用法
假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft ...
- 获取到body的offsetTop和offsetLeft值
function offsetTL(obj){//获取到body的offsetTop和offsetLeft var t=0,l=0; while(obj){ t=t+obj.offsetTop; l= ...
- offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight
w3c规范,请戳这里:http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent 一.offsetParent 英文解读: part o ...
- 扒一扒offsetleft，srollleft，pagex，clientx，postion().left等精确位置的获取与理解
先上个pc端和手机端的图: 说明:上面的属性,都是in这个div的属性值.我是点击的in这个div的左上角,所以pageX.pageY是40. HTML: <div class=" ...
- 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...
- JS-scrollTop、scrollHeight、clientTop、clientHeight、offsetTop、offsetHeight的理解
scrollTop, 可写(这些属性中唯一一个可写的元素) Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数. 一个元素的 scrollTop 值是这个元素的顶部到 ...
- js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版【转】
之前在修改IE6下的一个显示bug时,查到过这些,贴这备忘,后面给出了详细说明,以前的版本,没仔细的说明,特希望大家也收藏下. 网页可见区域宽: document.body.clientWidth ...
- clientTop、offsetTop和scrollTop的区分
页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offse ...
- offsetLeft,Left,clientLeft的区别
offsetLeft,Left,clientLeft的区别 假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的 ...
随机推荐
- 这十大MCU厂商瓜分着中国市场
MCU(Micro Control Unit)中文名称为微控制单元,又称单片微型计算机(Single Chip Microcomputer)或者单片机,是指随着大规模集成电路的出现及其发展,将计算机的 ...
- 数据结构（跳跃表）：NOI 2004 郁闷的出纳员
郁闷的出纳员 [问题描述] OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常, ...
- Hive 创建和生成Rcfile 和SequenceFile格式的表
rcfile格式表需要从原始的textfile 文件格式表导出数据并导入到新建好的rcfile格式表里 转: HIVE RCFile高效存储结构 创建rcfile 格式的表: CREATE TABLE ...
- android如何建立数据库。（如何重写SQLiteOpenHelper）
public class DBConnection extendsSQLiteOpenHelper{//继承SQLiteOpenHelper, public DBConnection(Context ...
- 通过cocos2d-x的CCGLProgram和CCShaderCache的实现来分析OpenGL ES中的Shader编程
在OpenGL ES中,Shader是着色器,包括两种:顶点着色器(Vertex Shader)和片元着色器(Fragment Shader).每个program对象有且仅有一个Vertex Shad ...
- TF卡格式化8G格式化时候变成128KB的解决办法
我的8GC6卡,APPS2SD后,因为不满意分区容量,所以就想删除分区重新分配容量. 删除分区方法:我的电脑---管理---磁盘管理--里删除了EXT3分区, 结果导致TF卡变成FAT格式且没有容量. ...
- [疑惑与解答] WxPython In Action -1
在学<活学活用wxPython>第三章的时候,我遇到一点疑惑,那就是下面语句的区别是什么 例 3.1 第4,5行: panel = wx.Panel(self, -1) button = ...
- ping and traceroute（tracert）
1.ping程序简单介绍 这个程序是Mike Muuss编写的.目的是測试另外一台机子是否可达. 运用的协议就是ICMP.运用的是ICMP的回显应答和请求回显两个类型.曾经呢.能ping通说明可以进行 ...
- Qt 学习之路 ：进程间通信
上一章我们了解了有关进程的基本知识.我们将进程理解为相互独立的正在运行的程序.由于二者是相互独立的,就存在交互的可能性,也就是我们所说的进程间通信(Inter-Process Communicatio ...
- centos 安装 lnmp
直接yum install nginx不行,要先处理下源,下面是安装完整流程 1. rpm -ivh http://nginx.org/packages/centos/6/noarch/RPMS/ng ...