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. PHP 是怎么接收到请求的？

    本篇文章主要描述一下几点 ● nginx 怎么转发请求 给 PHPFPM? ● CGI 和 FastCGI 到底是个什么玩意? ● PHPFPM 是什么?有什么作用? 简单场景描述 在浏览器上访问一个 ...

  2. jmeter 把返回数据写到文件

    jmeter如何把返回数据写入到文件 作者:WhoisTester    2015-10-20 20:11 1. 首先我们可以使用 regular expression extractor 正则表达式 ...

  3. LR为什么用极大似然估计，损失函数为什么是log损失函数（交叉熵）

    首先,逻辑回归是一个概率模型,不管x取什么值,最后模型的输出也是固定在(0,1)之间,这样就可以代表x取某个值时y是1的概率 这里边的参数就是θ,我们估计参数的时候常用的就是极大似然估计,为什么呢?可 ...

  4. mac下使用iterm实现自动登陆

    1.通过brew安装sshpass(手动安装也可以) ①brew安装sshpass brew install https://raw.githubusercontent.com/kadwanev/bi ...

  5. RMQ（鸽巢原理或字符串操作）

    http://acm.hdu.edu.cn/showproblem.php?pid=3183 A Magic Lamp Time Limit: 2000/1000 MS (Java/Others)   ...

  6. 1、引言(Introduction)

    1.1 欢迎 在生活中用到的机器学习算法: (1)打开谷歌.必应搜索到你需要的内容,正是因为他们有良好的学习算法 (2)每次您阅读您的电子邮件垃圾邮件筛选器,可以帮你过滤大量的垃圾邮件 机器学习为什么 ...

  7. display：table的几个用法

    DIV+CSS的布局已经让表格布局几乎很少用到,除非表格语义性很强的情况. display:table解决了一部分需要使用表格特性但又不需要表格语义的情况, 尤其是DIV+CSS很不方便解决的问题,比 ...

  8. Codeforces 1156D 0-1-Tree ( 并查集 || 树形DP )

    <题目链接> 题目大意: 给定一颗无向树,树的边权只要0/1两种情况,现在问你这棵树上存在多少对有序对<u,v>,满足u-->v的路径上,如果出现边权为1的边之后,就不能 ...

  9. Solr的学习使用之（三）IKAnalyzer中文分词器的配置

    1.为什么要配置? 1.我们知道要使用Solr进行搜索,肯定要对词语进行分词,但是由于Solr的analysis包并没有带支持中文的包或者对中文的分词效果不好,需要自己添加中文分词器:目前呼声较高的是 ...

  10. 微信小程序（9）--音频及视频弹幕

    记录微信小程序音频及视频弹幕播放效果. 1.audio <!-- audio.wxml --> <audio poster="{{poster}}" name=& ...