在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. 在CentOS之上搭建VMware Player 7

    1.下载VMware-Player-7.1.2安装包 百度网盘下载地址: 链接:http://pan.baidu.com/s/1nudfo6H 密码:oemc 直接下载地址: https://down ...

  2. php中替换函数主要用的几个函数strtr(),str_repalce()。

    php中替换函数主要有strtr(),str_repalce()这两个函数,今天介绍下他们的区别和用法, 先来看看这个php字符串替换函数 strtr()的两种用法: strtr(string,fro ...

  3. Python查看函数代码内容

    方法1:使用help(random) >>> import random >>> help(random) Help on module random: NAME ...

  4. C++Lua配置

    1.先从lua官网下载lua新版本http://www.lua.org/,我这里以lua-5.3.0.tar.gz为例,大小不到300kb 2.解压后出现如下图 3.在vs2013新建工程静态库类型( ...

  5. Curling 2.0 分类： 搜索 2015-08-09 11:14 3人阅读 评论(0) 收藏

    Curling 2.0 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14289 Accepted: 5962 Descript ...

  6. UVa 133，发放救济金

    沿用前一个题的思路: 用left记录剩下的点,直到全部选完. 这里我的问题是,我一直pos = (pos + f + n)%n,这里的问题是对于B点来说,开始的位置是1,就成了(1+(-1) +n) ...

  7. Scrapy学习教程

    http://scrapy-chs.readthedocs.io/zh_CN/0.24/intro/tutorial.html 在线学习教程: http://learnpythonthehardway ...

  8. 批发网加盟页面轮播Jquery jcarousellite插件效果

    Jquery jcarousellite 插件的好处 其中: 参数说明: btnPrev     string 上一个按钮的class名, 比如  btnPrev: ".prev" ...

  9. linux 文件操作命令

    目录操作命令 命令格式 命令 [-选项] [-参数] ls -la /etc 有多个选项时可以合并 ls命令: -a (all) 显示所有文件,包括隐藏文件,那是用.开头的文件 为什么要隐藏(这是个系 ...

  10. log4j.properties详解与例子

    在项目中的classes 中新建立一个log4j.properties文件即可: 在实际编程时,要使Log4j真正在系统中运行事先还要对配置文件进行定义.定义步骤就是对Logger.Appender及 ...