在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. struts2-json-plugin插件实现异步通信

    用例需要依赖的jar: struts2-core.jar struts2-convention-plugin.jar,非必须, struts2-json-plugin.jar org.codehaus ...

  2. php blowfish加密解密具体算法

    PHP Blowfish 算法的加密解密,供大家参考,具体内容如下<?php/*** php blowfish 算法* Class blowfish*/class blowfish{/*** b ...

  3. Python升级Yum不能使用解决

    1.系统版本 [root@vm10-254-206-95 ~]# cat /etc/issue CentOS release 6.4 (Final) Kernel \r on an \m 2.系统默认 ...

  4. 微信利用PHP创建自定义菜单的方法

    在使用通用接口前,你需要做以下两步工作:1.拥有一个微信公众账号,并获取到appid和appsecret(在公众平台申请内测资格,审核通过后可获得)2.通过获取凭证接口获取到access_token注 ...

  5. linux crontab定时执行

    #利用crontab定时执行url研究了两种简单方式#一利用lynx访问url yum install lynxservice crond startcrontab -einsert键* * * * ...

  6. 新学习的语言Groovy

    什么是 Groovy? Groovy 是 JVM 的一个替代语言 —替代 是指可以用 Groovy 在 Java 平台上进行 Java 编程,使用方式基本与使用 Java 代码的方式相同.在编写新应用 ...

  7. ACM题目————小A的计算器

    Description 以往的操作系统内部的数据表示都是二进制方式,小A新写了一个操作系统,系统内部的数据表示为26进制,其中0-25分别由a-z表示.  现在小A要在这个操作系统上实现一个计算器,这 ...

  8. API判断网站IP地址,国家区域

    直接访问http://api.wipmania.com/jsonp 还有经纬度

  9. PHP生成 excl、word文件

    PHP生成 excl.word文件 $time = time();   $filename = date("Y年m月d日h点m分s秒", $time).'问卷数据';  $rows ...

  10. 多校3- RGCDQ 分类: 比赛 HDU 2015-07-31 10:50 2人阅读 评论(0) 收藏

    RGCDQ Time Limit:3000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Status Practic ...