参考:http://www.cnblogs.com/woshilee/articles/1951457.html

offsetLeft 获取的是相对于父对象的左边距

left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距

如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值。如果所有父元素,子元素都没与设定定位,那么其offsetLeft是相对于浏览器本身的左边距,如果其父元素有定位,就是离其最近的父元素的距离。

总之,要用offsetLeft和style.left的时候,还是确定好定位比较好。

这同offsetLeft是相同的,区别在于:
1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,
还用offsetLeft比较方便。
2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。
3. style.left的值需要事先定义,否则取到的值为空。而且必须要定义在html里,我做过试验,如果定义在
css里,style.left的值仍然 为空,这就是我刚开始碰到的问题,总是取不到style.left的值。

offsetLeft则仍然能够取到,无需事先定义div的位置。

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 的区别

    offsetLeft 获取的是相对于父对象的左边距: left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距: 如果父div的position定义为rel ...

  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. 生产环境中 Ngx_lua 使用技巧和应用的范例

    生产环境中 Ngx_lua 使用技巧和应用的范例 时间 -- :: 51CTO技术博客 原文 http://rfyiamcool.blog.51cto.com/1030776/1252501 主题 L ...

  2. jsdoc — js注释

    官方文档 http://usejsdoc.org/ - sublime插件 https://github.com/spadgos/sublime-jsdocs - 生成文档 生成html: (1)安装 ...

  3. iOSXib布局后代码修改约束的值

      如何修改autolayout 约束的值? 目前我已知的方法有5种 1.修改frame(有时候可能会不起作用,但可以做动画) 2.修改约束的float值 3.使用VisualFormat 语言 4. ...

  4. Redis的README.md

    This README is just a fast *quick start* document. You can find more detailed documentation at http: ...

  5. js 把字符串当做方法执行

    <SCRIPT LANGUAGE="JavaScript"> function test(str){ alert(str); } eval('test("aa ...

  6. 第一百九十七节,jQuery EasyUI,LinkButton(按钮)组件

    jQuery EasyUI,LinkButton(按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 LinkButton(按钮)组件的使用方法,这个组 ...

  7. #进阶系列——WebApi 身份认证解决方案:Basic基础认证

    阅读目录 一.为什么需要身份认证 二.Basic基础认证的原理解析 1.常见的认证方式 2.Basic基础认证原理 三.Basic基础认证的代码示例 1.登录过程 2./Home/Index主界面 3 ...

  8. vue - audio标签

    audio 标签 <audio :src="current_music" autoplay controls autoloop @end="next_song&qu ...

  9. Java手记

    由于腾讯的MTA只有JAVA的demo,为了测试用php实现的加密算法是否正确,所有只能运行一下Java 配置环境:http://www.runoob.com/java/java-environmen ...

  10. 详解 比特(位,bit),字节(Byte),字符的区别 *(转)

    比特(位):英文bit,是计算机晶体管的一种状态(通电与断电).就是0与1,真与假,是计算机最基本的传输单位. 示例: 2bit : 10; 4bit : 1111; 8bit : 1111 1111 ...