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. mybatis全局配置mybatis-config.xml

    大部分时候,我们都是在Spring 里面去集成MyBatis.因为Spring 对MyBatis 的一些操作进行的封装,我们不能直接看到它的本质,所以先看下不使用容器的时候,也就是编程的方式,MyBa ...

  2. web调试代理工具Whistle

    由于最近在学习微信小程序开发,项目中用到了https代理请求,所以用到了基于Node实现的跨平台web调试代理工具Whistle,在此做一记录. 完成https代理请求总共需要5个步骤. 一.安装No ...

  3. seaborn教程3——数据集的分布可视化

    原文转载:https://segmentfault.com/a/1190000015006667 Seaborn学习大纲 seaborn的学习内容主要包含以下几个部分: 风格管理 绘图风格设置 颜色风 ...

  4. python第一部分小结

       1.python的种类                                                                              Cpython: ...

  5. 攻防世界--maze

    测试文件下载:https://adworld.xctf.org.cn/media/task/attachments/fa4c78d25eea4081864918803996e615 1.准备 获得信息 ...

  6. CSS中quotes属性以及content的open(close)-quotes属性

    定义和用法 quotes 属性设置嵌套引用(embedded quotation)的引号类型. 可能的值 值 描述 none 规定 "content" 属性的 "open ...

  7. centos 7 命令界面与GUI界面切换

    一.需要重启生效 1. 命令模式     systemctl set-default multi-user.target 2. 图形模式     systemctl set-default graph ...

  8. Envoy的线程模型[翻译]

    Envoy threading Model 关于envoy 代码的底层文档相当稀少.为了解决这个问题我计划编写一系列文档来描述各个子系统的工作.由于是第一篇, 请让我知道你希望其他主题覆盖哪些内容. ...

  9. Linux系统理解以及Linux系统学习心得

    原创作品转载请注明出处  <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 作者:严哲璟 说一下我对Lin ...

  10. Java web入门之Http请求和响应

    三层架构 web层:JSP + Servlet.Struts 2.SpringMVC service层:Spring dao层:JDBC.DBUtils.Hibernate.MyBatis form表 ...