简单谈谈offsetleft、offsetTop和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没有把边框计算进去），下面是代码

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

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);
 }
}

到此这篇关于offsetleft、offsetTop和offsetParent的文章就介绍到这了,更多相关offsetleft、offsetTop和offsetParent内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 获取offsetTop和offsetLeft值的js代码(兼容)

    复制代码 代码如下: function offsetTop( elements ){ var top = elements.offsetTop; var parent = elements.offsetParent; while( parent != null ){ top += parent.offsetTop; parent = parent.offsetParent; }; return top; }; function offsetLeft( elements ){ var left =

  • Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    在阅读本文之前,请先看一看第一篇文章Javascript拖拽系列文章1之offsetParent属性,因为循序渐进是一个很好的习惯,值得提倡.好了,看看我们今天的内容吧. 首先让我们先看一看element.offsetLeft属性. 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ 定义:返回一个像素数值,它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量.

  • 谈谈对offsetleft兼容性的理解

    关于此属性的基本用法可以参阅offsetleft属性用法详解一章节. 此属性具有一定的兼容性问题,那就是在IE7浏览器中,它的返回值是想对于最近的父辈元素的左侧的距离. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" />

  • 获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft （For:IE5＋ FF1 ）[

    问题: 如何取到页面中任意某个Html元素与body元素之间的偏移距离? offsetTop和offsetLeft 这两个属性,IE .Opera和Firefox对它俩的解释存在差异: IE5.0+ .Opera8.0+: offsetTop和offsetLeft 都是相对父级元素 Firefox1.06: offsetTop和offsetLeft 都是相对于body元素 因此: (1)在FF下直接使用offsetTop和offsetLeft,就可以取到页面中任意某个Html元素与body元素之

  • 浅析offsetLeft,Left,clientLeft之间的区别

    浅析offsetLeft,Left,clientLeft之间的区别

    假设 obj 为某个 HTML 控件 obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素. obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素. obj.offsetHeight 指 obj

  • javascript中style.left和offsetLeft的用法说明

    如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便. 2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left. 3. st

  • JavaScript中style.left与offsetLeft的使用及区别详解

    如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值, 这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便. 2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left. 3. s

  • window.setInterval()方法的定义和用法及offsetLeft与style.left的区别

    定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval()被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. 提示: 1000 毫秒= 1 秒. 语法 setInterval(code,millisec,lang) 参数 描述 code 必需.要调用的函数或要执行的代码串. millisec 必须.周期

  • 详解 javascript中offsetleft属性的用法

    此属性可以返回当前元素距离某个父辈元素左边缘的距离,当然这个父辈元素也是有讲究的. (1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离. (2).如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离. 语法结构: obj.offsetleft 特别说明:此属性是只读的,不能够赋值. 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8">

  • clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析

    screenX:鼠标在显示屏幕上的坐标. clientX:鼠标在页面显示区域的坐标. 注:以上两个都是各浏览器通用的. pageX:FF特有,鼠标在页面上的位置,从页面左上角开始定位,这个可以很方便在整个页面上进行定位,IE没有直接替换的属性. layerX:FF特有,鼠标相对于"触发事件的元素的层级关系中离该元素最近的,设置了position的父元素"的边界的位置,从border的左上角开始定位,即如果这个父元素存在border,则坐标原点在border的左上角,而不是内容区域的左上

随机推荐