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. HTML5-新增type属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Excel 技巧

    <!-- Excel跳转到指定行指定列 --> =HYPERLINK("#"&ADDRESS(要跳转到的行数,要跳转到的列数),"跳转")

  3. for in 和for of的区别

    for in 和for of的区别:https://www.jianshu.com/p/c43f418d6bf0 1 遍历数组通常用for循环 ES5的话也可以使用forEach,ES5具有遍历数组功 ...

  4. HTML5+Canvas手机拍摄，本地压缩上传图片

    最近在折腾移动站的开发,涉及到了一个手机里面上传图片.于是经过N久的折腾,找到一个插件,用法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  5. 专题：性能调优之工具---perf

    1. Linux Perf简介 1.1 Perf是什么 Perf 是内置于Linux 内核源码树中的性能剖析(profiling)工具.它基于事件采样原理,以性能事件为基础,支持针对处理器相关性能指标 ...

  6. XSLT学习（九）通过JavaScript转化xml

    如果您的浏览器支持 XSLT,那么在浏览器中它可被用来将文档转换为 XHTML. JavaScript 解决方案 在前面的章节,我们已向您讲解如何使用 XSLT 将某个 XML 文档转换为 XHTML ...

  7. 2019-6-23-WPF-托盘显示

    title author date CreateTime categories WPF 托盘显示 lindexi 2019-06-23 11:52:36 +0800 2018-11-21 11:19: ...

  8. （解决某些疑难杂症）Ubuntu16.04 + NVIDIA显卡驱动 + cuda10 + cudnn 安装教程

    一.NVIDIA显卡驱动 打开终端,输入: sudo nautilus 在新打开的文件夹中,进入以下路径(不要用命令行): 左下角点计算机,lib,modules 这时会有几个文件夹,对每个文件夹都进 ...

  9. go语言从例子开始之Example30.通道遍历

    在前面的例子中,我们讲过 for 和 range为基本的数据结构提供了迭代的功能.我们也可以使用这个语法来遍历从通道中取得的值 Example: package main import "f ...

  10. foreach与正常for循环效率对比

    foreach foreach编译成字节码之后,使用的是迭代器实现的. foreach特点: 无须获取容器大小 需要创建额外的迭代器变量 遍历期间得到的是对象,没有索引位置信息,因此不能进行赋值操作. ...