在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. 虚拟机 本地 本机 双启动 运行 vhd local Dual Boot

    在使用虚拟机的过程中, 可能会遇到虚拟机的运行要求过高, 电脑力不从心的情况. 为了让虚拟机使用更多电脑资源, 可以让虚拟机以本地双系统的方式,访问本地计算机资源. 打开磁盘管理,在磁盘上右键,选择 ...

  2. 高级工具gprof、gprof2dot.py、dot

    可以研究程序性能.函数调用堆栈等,而且能用图标查看. linux环境下 C++性能测试工具 gprof + kprof + gprof2dot - 阁子 - 博客园 gprof.gprof2dot.p ...

  3. 25、oracle(一)

    1)了解oracle背景,概念和特点 2)掌握oracleSQL对单表各种查询操作 3)掌握oracleSQL中函数的使用 4)掌握数值型number,字符串型varchar2,日期型date,条件判 ...

  4. bootstrap/moban191/js/templatemo_custom.js

    (function($) { "use strict"; // Cache selectors var lastId, topMenu = $(".menu-holder ...

  5. ecshop后台增加模板页的方法

    CShop的动态模板机制是一个非常灵活的系统,管理员可以在后台根据自己的要求调整模板模块的显示位置.本文详细讲解了如何修改ECSHOP内部结构使得用户可以添加自己的模板页从而方便灵活的使用系统自带的模 ...

  6. android内存优化相关1

    第一种策略,是释放显示相关的内存.这是我们针对系统APP采用的一种调优策略. 图形内容,俗称位图是非常占用内存的,针对位图,我们采用异步加载的方法,将位图内容信息和位图的状态信息分别进行存储,将内容信 ...

  7. PHP之分页类

    <?php /** * Created by PhpStorm. * User: Administrator * Date: 2016/6/22 * Time: 21:37 */ Class P ...

  8. ROADS

    ROADS Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11977 Accepted: 4429 Description N ...

  9. ural 1112,LIS

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1112 题意:n根线段,要拿走一些,使得任何的线段的左段没有在某一个线段的内部. 其实说白 ...

  10. php基础复习(一)smarty模板

    一.基本配置第一步:下载smarty:官网www.smarty.net第二步:加载类文件和更改配置 1. //加载类文件 require_once '../libs/Smarty.class.php' ...