参考: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. JavaScript之Date对象

    Javascript中的Date类型是在Java.util.Date基础上创建的. 以1970年01月01日至今的毫秒数来保存时间. 要创建一个Date var now = new Date(); 也 ...

  2. c++ why doesn't c++ allow rebinding a reference ?

    http://stackoverflow.com/questions/27037744/why-doesnt-c-allow-rebinding-a-reference# 1. The primary ...

  3. 解决Eclipse的dropins中svn插件不能加载的问题

    在eclipse的dropins中我们将svn的插件放到里边重启我们的ecplise就能正常加载svn插件了,如下图 但是有时候我们删除了svn的项目之后有可能我们的eclipse就不能正常加载svn ...

  4. Java并发编程(四)可见性

    除了使用synchronized关键字用于实现原子性或者确定"临界区(Critical Section)",还有一个重要的方面就是:内存的可见性(Memory Visibility ...

  5. 配置LANMP环境(5)-- 安装NGINX与配置

    安装nginx yum install nginx 若提示找不到nginx,则在软件源中添加nginx的软件源文件: vim /etc/yum.repos.d/nginx.repo 添加如下内容: [ ...

  6. CVS 相关内容

    CVS 基础 cvs 并不是 eclipse 独有, 而是 eclipse 支持 cvs. cvs 是用于几个程序员之间共享程序避免冲突的一个工具, 是 C/S 架构. cvs 是 java 的一个开 ...

  7. Error:指向绑定函数的指针只能用于调用函数

    a1.determinant; 改为: a1.determinant(); Eigen::MatrixXd a1(,);//ImagePoint a1<<n1,p1,n2,p2; doub ...

  8. Docker入门与应用系列(一)介绍与部署

    Docker介绍 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制, ...

  9. jQuery整理笔记八----jQuery的Ajax

    Ajax,我一直读的是"阿贾克斯",据当时大学老师讲该读音出处是依据当年风靡欧洲的荷兰足球俱乐部阿贾克斯的名字来的,我认为说法挺靠谱的. jQuery封装了Ajax的交互过程,用户 ...

  10. Scanner类与Random类

    1.Scanner类 Scanner类的作用是获得输入,下面代码用于获得用户的键盘输入,实例如下: 常用方法: String next():将输入信息的下一个标记扫描为一个字符串 Int nextIn ...