在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. Zero_qiqi DIV模式的省市区三级联动

    1].[代码] [HTML]代码 跳至 [1] [2] [3] [4] [5] [6] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  2. 8、web入门回顾/ Http

    1 web入门回顾 web入门 1)web服务软件作用: 把本地资源共享给外部访问 2)tomcat服务器基本操作      : 启动:  %tomcat%/bin/startup.bat 关闭: % ...

  3. C# 插件

    1.EsFrameWork框架 http://www.oraycn.com/ESFramework_download.aspx

  4. python中时间的基本使用

    格式化日期 我们可以使用 time 模块的 strftime 方法来格式化日期,: time.strftime(format[, t]) #!/usr/bin/python # -*- coding: ...

  5. 简单选择排序(Java)

    简单选择排序: 每一趟在整个记录中找到最小的那个作为有序序列的第i个记录. class SelectSort{ public void p(int[] a){ for(int i=0;i<a.l ...

  6. Uva 10118 免费糖果

    题目链接:https://uva.onlinejudge.org/external/101/10118.pdf 参考:http://www.cnblogs.com/kedebug/archive/20 ...

  7. php使用 set_include_path

    通过set_include_path引用home/lib/image.func.php 1.创建include.php 2.添加如下代码 3.在需要引用的文件中包含include.php文件 < ...

  8. 查看centos是多少位的系统命令

    打开命令行 运行下面命令 uname -i 如果是64位系统会显示x86_64 如果显示的是i386则是系统是32位

  9. 洛谷 P1896 [SCOI2005]互不侵犯King

    题目描述 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. 输入输出格式 输入格式: 只有一行,包 ...

  10. stm32工程模板的创建

    创建完成后 STM32F10X_HD,USE_STDPERIPH_DRIVER, 以及包含头文件