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. 单例模式（Singleton Patten）

    顾名思义,单例模式就是只有一个实例,不管怎样,使用了单例模式的类在系统中只有一个对象被访问到.Java中单例模式定义:“一个类有且仅有一个实例,并且这个类会自行实例化,实例化时候的对象可以提供给整个系 ...

  2. window.location.href后携带参数

    JS文件中: window.location.href后可携带参数,但是不安全,虽然在技术上是可以实现的 1.传参:window.location.href = "RecordCare.as ...

  3. 排序算法一：插入排序(Insertion sort)

    最近从网易公开课在看麻省理工学院的公开课<算法导论>,感觉还不错,接下来几篇文章所示学习日记了,不准备对算法细节做过多描述,感兴趣的可以自己去看. 文章分几篇讲经典排序算法,直接上代码,根 ...

  4. "CoolShell puzzle game" writeup

    地址:http://fun.coolshell.cn/ Fuck your brain 看到一大串符号,还以为是 js 代码,结果放到 Chrome 控制台执行没有任何结果,然后搜了一下发现有一门叫B ...

  5. Python之微信消息防撤回

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = 'jiangwenwen' import itchat from itchat. ...

  6. Ubuntu12.04下安装Subversion并进行配置

    Ubuntu下安装Subversion还是很简单的,只要输入sudo apt-get install Subversion就可以安装了. 主要的难点在于对权限的配置上. 安装完subversion后, ...

  7. python开发之路-day02

    一.数据类型 1 什么是数据? name='sunkedong'#字符串类型 age=24 #整型 date=2017.9#浮点型 dic={'name':'sunkedong','age':16}# ...

  8. 验证客户端的合法性、socketserver模块

    一.为了防止客户端被人非法利用,需要在使用之前对客户端进行合法性验证.接下来就是客户端验证的几种方法 hmac  加密方法 import socket import os import hmac #能 ...

  9. Centos7.6替换自带的jre安装jdk

    Centos7.6自带jre 1.8,可以作为java运行环境.但如果要编译java程序那就需要jdk,以下介绍如何把自带的jre卸掉并安装jdk 首先要卸载自带的jre PS:由于不同版本的操作系统 ...

  10. JVM（7）之 从GC日志分析堆内存

    开发十年,就只剩下这套架构体系了! >>>   在前面的文章中,我们只设置了整个堆的内存大小.但是我们知道,堆又分为了新生代,年老代.他们之间的内存怎么分配呢?新生代又分为Eden和 ...