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. CentOS防火墙命令集

    1. firewalld的基本使用 启动防火墙: systemctl start firewalld 防火墙状态: systemctl status firewalld 停止防火墙: systemct ...

  2. Pytest+Allure2+Jenkins搭建

    前置: (1)安装Python3(这里版本为3.7) (2)搭建Jenkins环境 一.安装pytest 直接使用pip安装(这里由于笔者的环境同时安装了Python2和Python3,所以在pyth ...

  3. flask为blueprint增加error_handler

    对整个app增加errorhandler,只需如下: @portal_page.errorhandler(404) def page_not_found(error): cats = Category ...

  4. kvm 修改虚拟机密码

    kvm 修改虚拟机密码 现在虚拟机kvm的使用很流行,为了更多的差异化环境,每个人可能拥有很多的kvm,这数量一多难免会有image的密码会忘记,相信很多人会采用kernel single user ...

  5. Servlet+AJAX实现的模拟电梯调度

    需求产生: 大三下学期天天在学校的同一栋教学楼上课,每天要等四次电梯,有次等电梯无聊了,就想到电梯的运行逻辑该如何用程序来表达呢? 问题描述: 大学的那栋楼有21层,不过在页面中画21层有点密,所以只 ...

  6. Thinkphp在nginx设置同域名二级目录访问

    Thinkphp在nginx设置同域名二级目录访问,是因为最近弄一个小程序项目,要https,但是只有单个域名,不能通配域名,所有只好用二级目录,thinkphp二级目录访问要怎么设置呢 下面是ngi ...

  7. java静态方法使用泛型

    用法 import java.util.ArrayList; import java.util.Collection; import java.util.HashSet; import java.ut ...

  8. Kafka、ActiveMQ、RabbitMQ、RocketMQ 都有什么区别，消息队列有什么优点和缺点

    面试题 为什么使用消息队列? 消息队列有什么优点和缺点? Kafka.ActiveMQ.RabbitMQ.RocketMQ 都有什么区别,以及适合哪些场景? 面试官心理分析 其实面试官主要是想看看: ...

  9. ssh - OpenSSH SSH 客户端 (远程登录程序)

    总览 (SYNOPSIS) ssh [-l login_name ] hostname | user@hostname [command ] ssh -words [-afgknqstvxACNTX1 ...

  10. myeclipse2014删除antlr-2.7.2.jar--解决struts和hibernate包冲突

    方式一: 要求眼疾手快,在workspace下的D:\myeclipse2014workspace\.metadata\.me_tcat7\webapps\工程名\WEB-INF\lib中将antlr ...