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

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

如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,
这同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的位置。

DOM中offsetLeft与style.left的区别的更多相关文章

  1. offsetLeft和style.left的区别

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

  2. offsetLeft与style.left的区别

    参考:http://www.cnblogs.com/woshilee/articles/1951457.html offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定 ...

  3. offsetleft 和 style.left 的区别

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

  4. DOM中的node与element的区别

    先看document的两个常见method. document.createTextNode Constructor: Text document.createElement Constructor: ...

  5. 详解 javascript中offsetleft属性的用法(转)

    详解 javascript中offsetleft属性的用法 转载  2015-11-11   投稿:mrr    我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...

  6. offsetLeft与style.left区别

    在javascript中经常遇到style.left和offsetLeft,那么它们有什么区别呢?今天我们来分析下 offsetLeft:获取当前元素相对于父元素的左侧偏移量,比如该元素设置为rela ...

  7. JS中offsetLeft,Left,clientLeft的区别(纯转贴)

    假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft ...

  8. JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

    JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes     ...

  9. DOM 中 Property 和 Attribute 的区别

    原文地址:http://web.jobbole.com/83129/ property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute: ...

随机推荐

  1. HTTP请求/响应报文结构

    HTTP协议版本有两种:HTTP1.0和HTTP1.1 它们俩的区别在于:HTTP1.0对于每个连接都只能传送一个请求和响应,请求后就会关闭,HTTP1.0没有Host字段:而HTTP1.1在同一个连 ...

  2. Spring Boot 是什么?

    Spring Boot 2.0 的推出又激起了一阵学习 Spring Boot 热,那么, Spring Boot 诞生的背景是什么?Spring 企业又是基于什么样的考虑创建 Spring Boot ...

  3. Javascript 将 HTML 页面生成 PDF 并下载

    最近碰到个需求,需要把当前页面生成 pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) html2canvas 简介 我们可以直接在浏览器端使用html2canvas,对整个 ...

  4. HDFS - Shell命令

    HDFS - Shell命令 最近学习比较忙,本来想做一个搭建集群笔记,今天先记录HDFS-shell命令,明天,最迟明天下午我一定会做一个搭建集群的笔记.. 介绍一个我的集群搭建:一主三从 3个虚拟 ...

  5. 【转】Entity Framework教程(第二版)

    源起 很多年前刚毕业那阵写过一篇关于Entity Framework的文章,没发首页却得到100+的推荐.可能是当时Entity Framework刚刚发布介绍EF的文章比较少.一晃这么多年过去了,E ...

  6. 谈一谈JUnit神奇的报错 java.lang.Exception:No tests found matching

    最近在学习Spring+SpringMVC+MyBatis,一个人的挖掘过程确实有点艰难,尤其是有一些神奇的报错让你会很蛋疼.特别是接触一些框架还是最新版本的时候,会因为版本问题出现很多错误,欢迎大家 ...

  7. js之全局变量与window对象

    所有在全局作用域中声明的变量.函数都会变成window对象的属性和方法. 即: var age = 55; 可以通过window.age访问 然而全局变量和与在window对象上定义的属性还是有一点区 ...

  8. php 处理ftp常用操作与方法

    原文地址:https://www.cnblogs.com/longfeiPHP/p/5420632.html $ftp_conn = ftp_connect("192.168.1.230&q ...

  9. Win10系列:VC++媒体播放

    媒体播放包括视频播放和音频播放,在开发Windows应用商店应用的过程中可以使用MediaElement控件来播放视频文件和音频文件.本节将通过一个具体的示例介绍如何使用MediaElement控件来 ...

  10. day6-if,while,for的快速掌握

    python的缩进和冒号 python之所以如此简单,归功于它的缩进机制,严格的缩进机制是的代码非常整齐规范,赏心悦目,提高了可读性,在一定意义上提高了可维护性,但对于从其他语音转过来的朋友如:jav ...