offsetLeft 获取的是相对于父对象的左边距,且返回值为数字;

  left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距,且返回值是字符串eg:10px;

  如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,

  这同offsetLeft是相同的,区别在于:
    1. style.left 返回的是字符串,offsetLeft返回的是数值,如果需要对取得的值进行计算,还用offsetLeft比较方便。
    2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。
    3. style.left的值需要事先定义,否则取到的值为空。且必须要定义在html里,若定义在css里,style.left的值仍为空。offsetLeft则仍可取到,无需事先定义div的位置。

  

  此外,还有获取坐标位置属性
1视口坐标位置:clientX、clientY;
2页面坐标位置:pageX、pageY;
3屏幕坐标位置:screenX、screenY;

offsetLeft的更多相关文章

  1. 通过一个实例理解 offsetLeft,offsetTop; offsetWidth , offsetHeight

    obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型 obj.offsetLeft 指 obj 相对于版面或由 offsetParen ...

  2. 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释

    offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将 ...

  3. JS:offsetWidth\offsetleft 等图文解释

        网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.of ...

  4. left和offsetLeft

    left: 1.当该对象的定位position为absolute时left是相对于拥有定位属性(position的值为默认值"static"时除外)的父级对象的左边距. 例1:当父 ...

  5. 关于offsetWidth,offsetHeight,offsetTop,offsetLeft和二维数组的声明

    offsetWidth,offsetHeight,offsetTop,offsetLeft 为只读状态,返回的值是int形式 只读形式即不能通过修改其值的大小. 想要修改某元素的这些值的大小(widt ...

  6. CSSOM视图模式(CSSOM View Module)相关整理:scrollWidth,scrollLeft,offsetLeft,clientX ,offsetX 定义和区别

    转:http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-mo ...

  7. clientX、pageX、scrollLeft、offsetLeft、clientWidth、screen.width的用法和区别

    一.定义和用法 1.event.clientX:事件对象的水平偏移量: event.clientY:事件对象的垂直偏移量: 2.event.pageX:事件对象加上滚动距离后的水平偏移量: event ...

  8. offsetLeft和style.left的区别

    offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relat ...

  9. offsetLeft与offsetTop详解

    offsetLeft与offsetTop使用方法一样,只是一个是找距离定位父级(position:relative)左边的距离,一个是找距离定位父级上边的距离 没有定位则找body,我们还是看看ie7 ...

  10. js的offsetWidth,offsetHeight,offsetLeft,offsetTop

    js的offsetWidth,offsetHeight,offsetLeft,offsetTop

随机推荐

  1. 把《C语言接口与实现》读薄之第一章:引言

    1.1文学程序 文学程序(literate program):接口及其实现的代码与对其进行解释的正文交织在一起.文学程序由英文正文和带标签的程序代码块组成.例如, 〈compute x * y〉≡ s ...

  2. Binder机制,从Java到C (10. Binder驱动)

    Binder驱动的代码都在kernel里面,这里就简单讲一下里面涉及到的几个东西: 1.MemoryBinder其实本质上就是一中数据传输方式,这种方式是通过binder driver实现的. 我们知 ...

  3. Event对象的事件句柄

    <html> <!-- onresize 事件会在窗口或框架被调整大小时发生 --> <!--onresize="alert('窗口的大小得到变化就会执行我') ...

  4. JPA 批注参考

    body, p, th, td, li, ul, ol, h1, h2, h3, h4, h5, h6, pre { font-family: simsun; line-height: 1.4; } ...

  5. Go语言Web框架gwk介绍 1

    Go语言Web框架gwk介绍 (一)   今天看到Golang排名到前30名了,看来关注的人越来越多了,接下来几天详细介绍Golang一个web开发框架GWK. 现在博客园支持markdown格式发布 ...

  6. C语言之while和do-while

    一 while和do-while的简介 1). while语句 语法: while(表达式){ 循环体; } 循环过程: 1.先判断表达式,是否为真,如果为真跳转到2,否则跳转到3 2.执行循环体,执 ...

  7. C语言之switch

    一 switch的语法 switch(表达式){ case 常量表达式1: 代码块1 break; case 常量表达式2: 代码块2 break; case 常量表达式3: 代码块3 break; ...

  8. SqlDataReader中的GetSqlValue()方法

    sdr.GetValue(0) "Title"sdr.GetValue(1)4sdr.GetValue(2)falsesdr.GetValue(3)0sdr.GetValue(4) ...

  9. 怎样通过WireShark抓到的包分析出SIP流程图

    WireShark抓到了SIP包, 逐条分析, 看瞎...希望能够写个脚本, 自动生成流程图

  10. Crystal Report 纵向排列,多列格式化

    一个表格区域就是一条数据,一张A4纸分布成2列4行打印. 这与通常的报表有点不一样,通常报表的明细都是一条一行:而现在要每2条放在一行,这需要用到“多列格式化”属性. 选择"多列格式”后,会 ...