offsetLeft 获取的是相对于父对象的左边距；

left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距；

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

二者的区别在于：

1.style.left返回的是字符串，如30px,offsetLeft返回的是数值30；

2.style.left是可读写的，而是offsetLeft是只读的，因此如果要改变div的位置，只能修改style.left；

3.style.left的值需要事先定义，否则取到的值为空；而且定义在css里是无法识别的，取到的值将依然为空，只有在html里定义的才有效；

——注：来自慕课上WayneJ老师讲解

 
 
 

offsetleft 和 style.left 的区别的更多相关文章

  1. offsetLeft和style.left的区别

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

  2. DOM中offsetLeft与style.left的区别

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

  3. offsetLeft与style.left的区别

    参考:http://www.cnblogs.com/woshilee/articles/1951457.html offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定 ...

  4. android 中theme.xml与style.xml的区别

    from://http://liangoogle.iteye.com/blog/1848448 android 中theme.xml与style.xml的区别: 相同点: 两者的定义相同. <r ...

  5. offsetLeft与style.left区别

    在javascript中经常遇到style.left和offsetLeft,那么它们有什么区别呢?今天我们来分析下 offsetLeft:获取当前元素相对于父元素的左侧偏移量,比如该元素设置为rela ...

  6. 04-offsetLeft和style.left的区别

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. .style, .getComputedStyle(),.currentStyle区别

    1)style只能获取行间样式(写在标签里面的):能读能写 2)currentStyle是专属ie的属性,区别他返回的是最终样式 及包括行间和外链css 3)getComputedStyle是一个可以 ...

  8. js中的offsetLeft和style.left

    (1)style.left是带单位"px"的,而offsetLeft没有单位,另外,style.left必须是内联样式,或者在JS中通过style.left赋值,否则取得的将为空字 ...

  9. js和jq中常见的各种位置距离之offsetLeft和position().left的区别（四）

    offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框).position().left:使用position().left ...

随机推荐

  1. 报错：Uncaught SyntaxError: Unexpected token）

    用JSON格式传值时,js一直 报这个错误:Uncaught SyntaxError: Unexpected token) 错误位置是:result=eval('('+result+')'): 原因: ...

  2. 学习ECMAScript标准和具体实现-JavaScript

    在NDN的JavaScript Guide里,Array和Map,Set都属于collections of data.它们的区别就是,Array是ordered by an index value,  ...

  3. CentOS7通过SpeedTest工具测速

    首先要安装SpeedTest工具,这里提供两种方法安装SpeedTest: 一.通过直接下载SpeedTest脚本,给权限运行脚本即可 [root@bogon ~]#wget -O speedtest ...

  4. 2019Flutter面试题最新整理大全（含答案）

    一.前言2019年行将结束,也该规划一下自己的职业生涯了:是选择继续从事Android(Android的话已经火了几年了,现在算是进入寒冬了,需要考虑清楚)?还是学习新的跨平台开发Flutter技术? ...

  5. 简单写入excel

    import pymysql,xlwt def to_excel(table_name): host, user, passwd, db = '127.0.0.1', 'root', '123', ' ...

  6. CodeChef Sereja and LCM(矩阵快速幂)

    Sereja and LCM   Problem code: SEALCM   Submit All Submissions   All submissions for this problem ar ...

  7. 克隆虚拟机（centos7）

    当我们做分布式测试时,需要多个节点(虚拟机),除了一个个虚拟机重新安装外,还可以从一个虚拟机镜像克隆出新的虚拟机 本例中要从名为master1的虚拟机克隆一个名为node1的 输入新的虚拟机名称和文件 ...

  8. JQuery的链式编程与隐式迭代

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Quartz的简单使用

    一.Quartz 介绍 Quartz是Java领域最著名的.功能丰富的.开放源码的作业调度工具,几乎可以在所有的Java应用程序中集成--从小的单机应用到大的电子商务系统. Quartz可以用来执行成 ...

  10. 记一次用Linux curl命令获取Django　url返回值异常的问题

    问题描述: curl 检测 URL 返回值以判断服务器是否正常 原命令:curl -I -m 10 -o /dev/null -s -w %{http_code} --insecure $url 问题 ...