offsetleft、offsetTop、offsetParent的兼容性问题

先来看看offsetParent返回的是什么值

ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个是定位过的,返回值就是body元素

ele.offsetLeft和ele.offsetTop取值问题,分多种情况:

如果ele是body的直接子元素,返回值则是ele距离body左侧或顶部的距离

如果ele不是body的直接子元素,在父元素进行定位(relative,absolute)的情况下,各浏览器返回值都是ele距离父元素左侧或者是顶部的距离(唯一的区别就是chrome没有把边框计算进去,IE,firefox都计算进去了)

如果ele不是body的直接子元素,父元素也没有进行定位的情况下,各浏览器返回的直接是ele元素距body的距离

从上面可以看出offsetLeft、offsetTop返回的值就是ele到offsetParent的距离,这个offsetParent是什么元素要看ele的父元素有没有进行定位(relative、absolute)

应用:

在要获取元素距离网页左侧距离的时候就要考虑offsetParent的定位问题,不能简单的用ele.offsetLeft/Top获取,必须通过循环累加的方式才能获得正确值(chrome的结果和IE、Firefox不一样,相差1px,原因是chrome没有把边框计算进去),下面是代码

var getOffset = {
	left:function(obj){
		return obj.offsetLeft + (obj.offsetParent ? this.left(obj.offsetParent) : 0);
	},
	top:function(){
		return obj.offsetTop + (obj.offsetParent ? this.top(obj.offsetParent) : 0);
	}
};

Tips:代码中的this.left、this.top可以用arguments.callee代替,但根据ECMAScript 5规范不建议使用,strict model下已经被禁用,因为arguments是一个比较庞大的对象,非常耗资源

时间: 2024-10-14 10:40:26

offsetleft、offsetTop、offsetParent的兼容性问题的相关文章

js中offsetLeft,offsetTop,offsetParent计算边距方法

封装一个函数获得任一元素在页面的位置 var GetPosition= function (obj) { var left = 0; var top = 0; while(obj.offsetParent)//如果obj的有最近的父级定位元素就继续 { left += obj.offsetLeft;//累加 top += obj.offsetTop; obj=obj.offsetParent;//更新obj,继续判断新的obj是否还有父级定位,然后继续累加 } return {“left”:le

offsetLeft , offsetTop,offsetParent,offsetWidth及offsetHeight

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

1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置position为absolute或relative),则offsetParent为根目录: 2)当元素的父元素没有进行css定位,则offsetParent取最近的已经定位的元素: 3)当元素的父元素进行了css定位,则offsetParent为父元素: 2.offsetLeft,offsetTop 在IE中:

offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight

offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度,内边距,(可见的)水平滚动条的高度,上下边框的高度. offsetLeft: 元素的左边框至包含元素的左内边框之间的像素距离 offsetTop: 元素的上边框至包含元素的上内边框之间的像素距离 offsetParent: 保存着包含元素的引用 注意: 1.当对象的offsetParent属性指向

HTML中常见的各种位置距离(clientTop clientLeft clientWidth ClientHeight offsetleft offsettop offsetwidth offsetheight等等)以及dom中的坐标讨论

最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的不好或者写错了,欢迎各位指正.好了废话不多说,开始进入主题. 这篇文章主要讨论两点: 一.DOM中各种宽度.高度 二.DOM中的坐标系 下面我们看看DOM中都有一些什么宽度.高度. 常见的 offsetWidth clientWidth scrollWidth offsetHeight client

js的offsetWidth,offsetHeight,offsetLeft,offsetTop

js动画 Css提供的运动 js提供的运动

1.     动画 (1)      Css样式提供了运动 过渡的属性transition  从一种情况到另一种情况叫过渡 Transition:attr  time  linear  delay: Attr 是变化的属性 Time 是花费的时间 Linear 变化的速度 Delay 是延迟 复习background:url() no-repeat 50% 50% red; Background-image Background-repeat Background-position Backgr

offset、client、scroll开头的属性归纳总结

HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent  第二组:clientWidth,clientHeight,clientLeft,clientTop 第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop 详细定义如下: 1.1

文档坐标及元素坐标等

基本 1.元素位置以像素度量,向右代表X坐标增加,向下代表Y坐标增加,X坐标和Y坐标可以相对于文档的左上角或者相对于其中显示文档的视口的左上角 2.如果没有出现滚动条时(即文档比视口小时),文档和视口坐标系统是同一个,如果出现滚动条时两种坐标系间的转换需要加上或者减去滚动的偏移量(scroll offset) 3.文档坐标在用户滚动时不会发生变化 4.getBoundingClientRect()返回的坐标包含元素的边框和内边距,不包括元素的外边距 三组坐标 每个html元素都有下面三组属性: