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. Struts2的拦截器

    拦截器的作用: 拦截器可以动态地拦截发送到指定Action的请求,通过拦截器机制,可以载Action执行的前后插入某些代码,植入我们的逻辑思维. 拦截器的实现原理: 拦截器通过代理的方式来调用,通过动 ...

  3. 重定向和VT100编程

    重定向和VT100编程 一.文件重定向     我们知道在linux shell 编程的时候,可以使用文件重定向功能,如下所示: [root@localhost pipe]# echo "h ...

  4. webx学习1

    webx的配置 如果想在web项目中使用webx框架,需要在web-inf/web.xml文件中进行相关的配置. 1.初始化spring容器 初始化spring容器- /web-inf/web.xml ...

  5. Undefined class constant 'MYSQL_ATTR_USE_BUFFERED_QUERY'

    The error that occurs is:Fatal error: Undefined class constant 'MYSQL_ATTR_USE_BUFFERED_QUERY' in /w ...

  6. Load ContextCLR 探测

    目录 背景Load ContextCLR 探测过程弱签名程序集的探测过程强签名程序集的探测过程Default ContextLoad-From ContextNo ContextRelfection- ...

  7. Linux环境进程间通信(一):管道及命名管道

    linux下进程间通信的几种主要手段: 管道(Pipe)及有名管道(named pipe):管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功能外,它还允 ...

  8. FlexPaper+SWFTool+操作类=在线预览PDF(转)

    引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swf ...

  9. 跟我一起玩转Sencha Touch 移动 WebApp 开发1

    跟我一起玩转Sencha Touch 移动 WebApp 开发(一) 1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 ...

  10. 里氏替换原则LSP(继承规范)

    继承的优点: 1.代码共享,减少创建类的工作量,每个子类都拥有父类的方法和属性. 2.提高代码的重用性. 3.子类可以形似父类,但又异于父类. 4.提高代码的可扩展性,实现父类的方法就可以“为所欲为” ...