在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. inupt textarea提示文字(点击消失,不输入恢复)

    <input name="textfield" type="text"  maxlength="20" value="请输入 ...

  2. php 的 构造函数 和 析构函数

    构造函数 在C++ java里的应用及其普遍,今天好好研究了一下 php 的 构造函数 和 析构函数 构造函数 和 析构函数 构造函数 void __construct ([ mixed $args ...

  3. sharepoint 开发

    1. 客户端界面搜索 <div> 业务员:<).match(reg); ]);return null; } function search() { var k=document.ge ...

  4. 关闭用miniUI打开的窗口

    miniUI打开的窗口用window.close关闭无效, 应该用window.CloseOwnerWindow();

  5. Balance

    Balance Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 11947 Accepted: 7464 Description ...

  6. 人活着系列之平方数 分类: sdutOJ 2015-06-22 17:10 7人阅读 评论(0) 收藏

    人活着系列之平方数 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 偶然和必然?命运与意志?生与死?理性与情感?价值与非价值?在&quo ...

  7. C++的几种强制类型转换

    有时我们希望显式地将对象强制类型转换成另外一种类型.例如,如果想在下面的代码中执行浮点数除法: int i, j; double slope = i / j; 就要使用某种方法将i和/或j显式地转换成 ...

  8. corefile的设置与使用

    一.简介 corefile是Linux下程序崩溃时生成的文件,可以用来分析程序崩溃的原因,因为它内部包含了程序崩溃时的堆栈信息. 二.corefile的设置 默认情况下,程序崩溃是不会生成corefi ...

  9. HTML+CSS编写规范

    在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...

  10. Entity Framework 第一篇

    这段时间研究了orm框架EF 写一写研究的历程和心得 先贴上核心代码 public interface ITransaction { bool IsTransaction { get;} void B ...