在javascript中经常遇到style.left和offsetLeft,那么它们有什么区别呢?今天我们来分析下

offsetLeft:获取当前元素相对于父元素的左侧偏移量,比如该元素设置为relative;left:
-10px;那么它的offsetLeft返回值是-10,而它的style.left还是为空,因为style.left只有行内设置的样式才有效;

style.left:获取当前元素的行内样式的值;

区别在于:

1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28

,如果需要对取得的值进行计算,还用offsetLeft比较方便。

2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。

3. style.left的值需要事先定义并且定义在标签的行内,否则取到的值为空。如果定义在css里,style.left的值仍然为空。offsetLeft则仍然能够取到,无需事先定义div的位置。

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

  1. offsetLeft与style.left的区别

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

  2. offsetLeft,Left,clientLeft的区别

    offsetLeft,Left,clientLeft的区别 假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的 ...

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

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

  4. offsetLeft和style.left的区别

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

  5. DOM中offsetLeft与style.left的区别

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

  6. offsetleft 和 style.left 的区别

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

  7. obj.offsetHeight与obj.style.height区别

    我们都知道obj.offsetHeight与obj.style.height都可以获取obj的高度,但是在js使用中,我们通常会使用前者来获取高度,这是为什么,二者有什么样的区别呢. 1.obj.of ...

  8. ios UITableView的style的区别与用法,以及分割线的显示与隐藏

    ******************tableview style****************************************************** // tableview ...

  9. js中的offsetLeft和style.left

    (1)style.left是带单位"px"的,而offsetLeft没有单位,另外,style.left必须是内联样式,或者在JS中通过style.left赋值,否则取得的将为空字 ...

随机推荐

  1. 浅析Java的HashCode,以及equals

    1.JDK规定,equals相等的两个对象hashCode也必须相等,这两个方法都是从Object上面继承而来的,通过观察JDK源码可以发现Object的equals方法是对2个对象的地址(逻辑地址, ...

  2. Serialize Documents with the C# Driver

    1.介绍 该文档是1.8版本的C#驱动. 本节教程讨论C#类和BSON文档之间的序列化和反序列化.序列化是将对象映射成一个可以存储在MongoDB中的BSON文档的过程,反序列化是从一个BSON文档重 ...

  3. String.Join 和 Distinct 方法 去除字符串中重复字符

    Qualys项目中写到将ServerIP以“,”分割后插入数据库并将重复的IP去除后发送到服务器进行Scan,于是我写了下面的一段用来剔除重复IP: //CR#1796870 modify by v- ...

  4. servlet 笔记

    Servlet的作用是接收浏览器传给服务端的请求(request),并将服务端处理完的响应(response)返回给用户的浏览器,浏览器和服务端之间通过http协议进行沟通,其过程是浏览器根据用户的选 ...

  5. EditorWindow窗口大小锁死后没有边框的解决方法

    var window = GetWindow(typeof(MyWindow), true); window.minSize = , ); window.maxSize = window.minSiz ...

  6. python中字符串\r的奇怪问题

    示例: 我这里有一字符串: u'北京市工商行政管理局大兴分局\r <a onclick="showJDS(\'fa641bb3be5b44a1b618433833982fee\',\' ...

  7. jack报错

    [ 29% 17593/59326] Ensure Jack server is installed and startedFAILED: /bin/bash -c "(prebuilts/ ...

  8. ubuntu查看内存占用和查看cpu使用情况的简单方法(ubuntu内存管理)

    单独查看内存使用情况的命令:free -m查看内存及cpu使用情况的命令:top也可以安装htop工具,这样更直观,安装命令如下:sudo apt-get install htop安装完后,直接输入命 ...

  9. NSIS学习记录の----NSIS插件调用

    我们都知道NSIS可以和C或者C++混合编程,方法是NSIS调用C或C++的动态库,那么如何调用呢? 首先我们来创建动态库: // add.cpp : 定义 DLL 应用程序的导出函数. #inclu ...

  10. anroid

    http://mirrors.neusoft.edu.cn/more.we#android http://www.cnblogs.com/youxilua/archive/2013/05/20/308 ...