在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. JDK结构介绍

    dt.jar和tools.jar位于:{Java_Home}/lib/下, 而rt.jar位于:{Java_Home}/jre/lib/下, 其中: (1) rt.jar是JAVA基础类库,也就是你在 ...

  2. 杭电1005-Number Sequence

    问题描述 A number sequence is defined as follows:f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) + B * f(n - 2) ...

  3. c# TCPclient

    服务端 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...

  4. /etc/ld.so.conf 介绍

    /etc/ld.so.conf 这个文件记录了编译时使用的动态链接库的路径,告诉链接器去哪个路径下寻找链接时需要用到的库,如果找不到,就会提示链接错误. 如果我们安装了第三方的库,而没有将它放在链接器 ...

  5. 学习java annotation

    Annotation介绍 内置注解 自定义注解 元注解 /** * 测试自定义注解的使用 * */ @SxtAnnotation01 public class Demo02 { @Annotation ...

  6. Android中直播视频技术探究之---桌面屏幕视频数据源采集功能分析

    一.前言 之前介绍了Android直播视频中一种视频源数据采集:摄像头Camera视频数据采集分析 中介绍了利用Camera的回调机制,获取摄像头的每一帧数据,然后进行二次处理进行推流.现在我们在介绍 ...

  7. P2312 解方程

    题目描述 已知多项式方程: a0+a1x+a2x^2+..+anx^n=0 求这个方程在[1, m ] 内的整数解(n 和m 均为正整数) 输入输出格式 输入格式: 输入文件名为equation .i ...

  8. 课务IOS概述_1

    1.网络 2.多线程 3.各种图形 4.动画 5.面向对象的数据库   Preconditions: 1.CS106 A和B 或CS106X 2.CS107或CS108更好 3.CS110就更好了 熟 ...

  9. BZOJ3687:bitset STL

    [bzoj3687][FJ2014集训]简单题 2014年9月14日1,8212 [题目描述]小呆开始研究集合论了,他提出了关于一个数集四个问题:1. 子集的异或和的算术和.2. 子集的异或和的异或和 ...

  10. VirtualBox下Ubuntu利用桥接方式上网

    1.打开virtualbox,选择[设置]-[网络]将连接方式改为[Bridged Adapter] 2.在Ubuntu中, 运行sudo gedit /etc/network/interfaces ...