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. Mac005--VS&webstorm前端开发工具安装

    Mac--Visual studio Code工具安装(企业常用) 安装网址:https://code.visualstudio.com/download 设置格式: 1.配置工作区与终端字体大小 常 ...

  2. [LeetCode] 182.查找重复的电子邮箱

    编写一个 SQL 查询,查找 Person 表中所有重复的电子邮箱. 示例: +----+---------+ | Id | Email | +----+---------+ | 1 | a@b.co ...

  3. ubuntu server 12.04安装任何软件都出现the following packages have unmet dependencies的解决方法

    虽然目前没太弄清这到底是怎么回事,但是暂时可以给出一个解决的方法, 如果在安装任何软件都会出现这个问题,那么尝试着输入sudo apt-get install -f试一下. 在该命令执行完成后,我这边 ...

  4. vue 全局filter的坑

    下面连段代码的filter放在不同的位子会有不同的效果, 1.filter放在new vue之后,居然不起作用 <script> new Vue({ el: '#app', data: { ...

  5. 洛谷 P3368 【模板】树状数组 2（区间加，单点查询）

    题目链接 https://www.luogu.org/problemnew/show/P3368 树状数组 最基础的用法:https://www.cnblogs.com/yinyuqin/p/1096 ...

  6. python学习第二十八天函数局部变量的用法

    函数局部变量是在函数里面的变量,只能在函数内部使用,如果函数没有找对应变量,函数将去函数外部找对应变量,局部变量优先级大于外部变量,详细说明一下 1,局部变量已经定义值 name='zhan san' ...

  7. 20180315-Python面向对象编程设计和开发

    1.在子类中调用父类的方法 在子类派生出的新方法中,往往需要重用父类的方法,我们有两种实现方式: 方式一:父类名.父类方法() Animal.__init__(self,name) 方式二:super ...

  8. REINDEX - 重建索引

    SYNOPSIS REINDEX { DATABASE | TABLE | INDEX } name [ FORCE ] DESCRIPTION 描述 REINDEX 基于存储在表上的数据重建索引, ...

  9. Spring Cloud Contract简介

    转载:https://www.jianshu.com/p/e3277824a10a 和dummy service一样 Spring Cloud Contract是个啥? Spring Cloud Co ...

  10. 一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏

    一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...