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. Eclipse添加Web和java EE插件

    1.在Eclipse中菜单help选项中选择install new software选项 2.在work with 栏中输入 Juno - http://download.eclipse.org/re ...

  2. [置顶] 实现360度全景图像的利器--PanoramaGL

    传送门 ☞轮子的专栏 ☞转载请注明 ☞ http://blog.csdn.net/leverage_1229 介绍 本指南将介绍一个PanoramaGL 0.1类库的简单用法,更多的细节请签出 Hel ...

  3. vs2015开发Windows服务

    工作已经很久,时隔这么长时间写这篇文章是给自己以后做参考.也不至于以后长时间不写Windows服务而忘记整个开发过程.windows服务开发,基础的就不说了,直接上过程. 1.新建windows服务项 ...

  4. 网络负载均衡环境下wsHttpBinding+Message Security+Windows Authentication的常见异常

    提高Windows Communication Foundation (WCF) 应用程序负载能力的方法之一就是通过把它们部署到负载均衡的服务器场中. 其中可以使用标准的负载均衡技术, Windows ...

  5. 需要我们了解的SQL Server阻塞原因与解决方法

    需要我们了解的SQL Server阻塞原因与解决方法 上篇说SQL Server应用模式之OLTP系统性能分析.五种角度分析sql性能问题.本章依然是SQL性能 五种角度其一“阻塞与死锁” 这里通过连 ...

  6. MacOSX 下.app支持同时运行多个实例

    在MacOSX下的.app是一个程序包(实际上是个目录),双击该目录时系统会根据包的目录结构启动相应的可执行程序..app的程序默认是单实例运行的,所以从.app启动的程序实例只有一个(可执行程序不受 ...

  7. 使用Pechkin将HTML网页转换为PDF

    Pechkin开源组件使用wkhtmlbox,可以解析CSS样式,将网页转换为PDF文件, 支持URL,或者HTML字符串 1, 从NuGet程序管理器中获得Pechkin  GlobalConfig ...

  8. Broadcast Reveiver作用

    Broadcast Reveiver作用以及为何要引入(用来接收系统以及自定义消息的) 在系统内通知和判定执行状态 1,系统执行状态,开机了,TF卡插拔,准备关机,电量低了, 2,自定义执行状态,发消 ...

  9. Js 获取当前月的天数

    function getDays() { //构造当前日期对象 var date = new Date(); //获取年份 var year = date.getFullYear(); //获取当前月 ...

  10. MVC源码解析 - 配置注册 / 动态注册 HttpModule

    本来这一篇, 是要继续 Pipeline 的, 但是在 Pipeline之前, 我看到了InitModules()方法, 所以决定, 在中间穿插一篇进来. 这一篇来讲一下 IHttpModule 的加 ...