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有几种开发语言

    php有几种开发语言? php的启发语言有五种,分别是C.Perl.Java.C++.Python. PHP(全称:PHP:Hypertext Preprocessor,即“PHP:超文本预处理器”) ...

  2. “希希敬敬对”Alpha版本发布说明

    Alpha版本的所有功能如下: 1.完成根据贴吧关键字检索的功能,通过用户输入的关键词或URL地址链接到对应的贴吧页面,并爬取到该贴吧前10页的相关数据.2.对爬取到的数据进行分析和整合,实现获取该贴 ...

  3. stl（set和pair）

    D - 4 Gym - 100989D In this cafeteria, the N tables are all ordered in one line, where table number ...

  4. python学习第三十二天函数的闭包

    python函数中嵌套另外一个函数,另外一个函数形成一个封闭的环境,里面的那个函数叫做函数的闭包,函数的闭包好处可以保护函数里面的变量,下面讲述函数闭包的实例和用法 1,函数闭包的实例 a='cat' ...

  5. 【学习总结】Python-3-Python数字类型转换

    菜鸟教程-Python3-Python数字 Python3支持三种数值类型:整型int,浮点型float,复数complex 格式:将数字类型作为函数名即可,然后传入要转换的参数. int(x) 将x ...

  6. mpvue 微信小程序半屏弹框（half-screen-dialog）

    <template> <div> <a @click="isShow">half-screen-dialog</a> <!-- ...

  7. unity ui坐标系转换

    世界坐标: transform.position获取的是世界坐标 屏幕坐标: 单位像素 屏幕左下角(0,0)右上角(Screen.width,Screen.height) Screen.width = ...

  8. [Luogu2365]任务安排（斜率优化）

    [Luogu2365]任务安排 题目描述 N个任务排成一个序列在一台机器上等待完成(顺序不得改变),这N个任务被分成若干批,每批包含相邻的若干任务.从时刻0开始,这些任务被分批加工,第i个任务单独完成 ...

  9. <select multiple="multiple"> 数据回显

    var names = yunying_name.split(","); for (var i = 0; i < names.length; i++) { names[i] ...

  10. PL SQL安装

    首先,在官网下载PL SQL 的对应版本,本机是64位的就下载64位的,网址:https://www.allroundautomations.com/downloads.html#PLS 点击应用程序 ...