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. Linq to sql 结

    ----左链接 var LeftJoin = from emp in ListOfEmployees join dept in ListOfDepartment on emp.DeptID equal ...

  2. DropDownList单选与多选下拉框

    一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...

  3. cocos2d-x 实现跨平台的目录遍历

    可能各位看官们有更好的方法,请不吝赐教. #ifdef _WIN32 #include <io.h> #else #include <unistd.h> #include &l ...

  4. EasyUI项目驱动学习

    下面以一个项目简单介绍easyui的使用,主要包括以下组件 布局面板 - layout 可伸缩面板 - accordion 选项卡 - tabs 控制面板 - panel 窗口 - window 对话 ...

  5. 基于c#+xaml的前台采用IE的js引擎写后台

    基于c#+xaml的前台采用IE的js引擎写后台的猜想 参考上一篇文章 基于js的开发wp8界面的猜想知道可以使用 js的window.external.notify调用c# c#可以用InvokeS ...

  6. [转]SQL Server中临时表与表变量的区别

    [转]http://blog.csdn.net/skyremember/archive/2009/03/05/3960687.aspx 我们在数据库中使用表的时候,经常会遇到两种使用表的方法,分别就是 ...

  7. 取SQL分组中的某几行数据

    取SQL分组中的某几行数据 对表中数据分组,有时只需要某列的聚合值:有时却需要返回整行数据,常用的方法有:子查询.ROW_NUMBER.APPLY,总体感觉还是ROW_NUMBER比较直观.测试数据: ...

  8. spring.net AOP初探

    AOP是什么? 面向切面编程,在OO中有一个开放关闭原则,及对修改关闭,对扩展开放.AOP可以说是设计模式的集合加强版,使用代理.工厂.策略等等模式,来实现方法的结合.这样说还比较模糊,我们先往下看. ...

  9. Windows下的环境搭建Erlang

    Windows下的环境搭建 Erlang 一.安装编译器 在http://www.erlang.org/download.html下载R16B01 Windows Binary File并安装. 二. ...

  10. javascript 闭包基础分享

    javascript 闭包基础分享 闭包向来给包括JavaScript程序员在内的程序员以神秘,高深的感觉,事实上,闭包的概念在函数式编程语言中算不上是难以理解的知识.如果对作用域,函数为独立的对象这 ...