JavaScript中style.left与offsetLeft的使用及区别详解

如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，
这同offsetLeft是相同的，区别在于：

1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。

2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。

3. style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，我做过试验，如果定义在css里，style.left的值仍然 为空，这就是我刚开始碰到的问题，总是取不到style.left的值。

offsetLeft则仍然能够取到，无需事先定义div的位置。

// 这个函数是对 一个无穷分类的 下拉框的操作，页面开始只有一个下拉框，当选中下拉框一个值后，
动态生成一个select, select的项是子分类，同时要使子分类的select框后移 20px;

代码如下:

function itemtree_cats_change ( selectObj )

JavaScript中style.left与offsetLeft的区别说明如下所示：

今天在制作焦点轮播图的时候，遇到一个问题，在使用style.left获取图片的位置时，怎么也获取不到。换用offsetLeft就能够成功获取到了。虽然实现了我想要的效果，但是还是不甘心啊，没有找到原因，心里就是怪怪的，于是我翻开JavaScript高级程序设计，将style.left和offsetLeft有关的知识点都看了一下，做了如下比较。

（一）、对于style.left类属性，JavaScript高级程序是这样描述的：

任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式（关键就在这句话！也就是说只有设置为行内样式的style属性才能被获取）。在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性。

（二）、对于offsetLeft累属性：

offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。

通过看书和今天遇到的问题，对style.left和offsetLeft做如下总结

相同点

1、style.left与offsetLeft都是相对于其父元素的值。

不同点

1、style.left返回的是字符串，带有px;offsetLeft返回的是数值。

2、style.left时可以读取的也是可以配置的；offsetLeft只能读取不能配置。

赞 (0)

相关推荐

  • Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    在阅读本文之前,请先看一看第一篇文章Javascript拖拽系列文章1之offsetParent属性,因为循序渐进是一个很好的习惯,值得提倡.好了,看看我们今天的内容吧. 首先让我们先看一看element.offsetLeft属性. 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ 定义:返回一个像素数值,它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量.

  • 详解 javascript中offsetleft属性的用法

    此属性可以返回当前元素距离某个父辈元素左边缘的距离,当然这个父辈元素也是有讲究的. (1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离. (2).如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离. 语法结构: obj.offsetleft 特别说明:此属性是只读的,不能够赋值. 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8">

  • javascript中style.left和offsetLeft的用法说明

    如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便. 2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left. 3. st

  • JS小功能(offsetLeft实现图片滚动效果)实例代码

    JS小功能(offsetLeft实现图片滚动效果)实例代码

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #div1        {            width: 245px;            height: 150px;            background: red;            margin: 250p

  • 获取offsetTop和offsetLeft值的js代码(兼容)

    复制代码 代码如下: function offsetTop( elements ){ var top = elements.offsetTop; var parent = elements.offsetParent; while( parent != null ){ top += parent.offsetTop; parent = parent.offsetParent; }; return top; }; function offsetLeft( elements ){ var left =

  • JavaScript中style.left与offsetLeft的使用及区别详解

    如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值, 这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便. 2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left. 3. s

  • JavaScript中十种一步拷贝数组的方法实例详解

    JavaScript中十种一步拷贝数组的方法实例详解

    JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下. 1.扩展运算符(浅拷贝) 自从ES6出现以来,这已经成为最流行的方法.它是一个很简单的语法,但是当你在使用类似于React和Redux这类库时,你会发现它是非常非常有用的. numbers = [1, 2, 3]; numbersCopy = [...numbers]; 这个方法不能有效的拷贝多维数组.数组/对象值的拷贝是通过引用而不是值复制. // numbersCopy.push(4);

  • JS中script标签defer和async属性的区别详解

    JS中script标签defer和async属性的区别详解

    向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script

  • 对pandas中两种数据类型Series和DataFrame的区别详解

    1. Series相当于数组numpy.array类似 s1=pd.Series([1,2,4,6,7,2]) s2=pd.Series([4,3,1,57,8],index=['a','b','c','d','e']) print s2 obj1=s2.values # print obj1 obj2=s2.index # print obj2 # print s2[s2>4] # print s2['b'] 1.Series 它是有索引,如果我们未指定索引,则是以数字自动生成. 下面是一些例

  • 对python中 math模块下 atan 和 atan2的区别详解

    atan 和 atan2 都是反正切函数,返回的都是弧度 对于两点形成的直线,两点分别是 point(x1,y1) 和 point(x2,y2),其斜率对应角度的计算方法可以是: angle = atan( (y2-y1)/(x2-x1) ) 或 angle = atan2( y2-y1, x2-x1 ) 因此可以看出 atan 和 atan2 的区别: 1.参数的个数不同:atan 为单个参数,atan2为两个参数 2.atan2 的优点在于: 如果 x2-x1等于0 ,角度依然可以计算,但是

  • 对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解

    在用tensorflow做一维的卷积神经网络的时候会遇到tf.nn.conv1d和layers.conv1d这两个函数,但是这两个函数有什么区别呢,通过计算得到一些规律. 1.关于tf.nn.conv1d的解释,以下是Tensor Flow中关于tf.nn.conv1d的API注解: Computes a 1-D convolution given 3-D input and filter tensors. Given an input tensor of shape [batch, in_wi

  • python中urllib.request和requests的使用及区别详解

    urllib.request 我们都知道,urlopen()方法能发起最基本对的请求发起,但仅仅这些在我们的实际应用中一般都是不够的,可能我们需要加入headers之类的参数,那需要用功能更为强大的Request类来构建了 在不需要任何其他参数配置的时候,可直接通过urlopen()方法来发起一个简单的web请求 发起一个简单的请求 import urllib.request url='https://www.douban.com' webPage=urllib.request.urlopen(

  • Python中的None与 NULL(即空字符)的区别详解

    1.首先要了解Python的对象的概念: Python中,万物皆对象,所有的操作都是针对对象的,那什么是对象,5是一个int对象,'oblong'是一个str对象,异常也是一个对象,抽象一点是,人,猫,够也是一个对象 那对于一个对象,它就有包括两方面的特征:  属性:去描述它的特征  方法: 它所具有的行为 所以,对象=属性+方法 (其实方法也是一种属性,一种区别于数据属性的可调用属性 把具有相同属性和方法的对象就可以归为一类,即Classl.类就好比是一张蓝图,使用一个类可以创建多个对象实例

  • C#中托管DLL和非托管DLL的区别详解

    首先解释一下,托管DLL和非托管DLL的区别.狭义解释讲,托管DLL就在Dotnet环境生成的DLL文件.非托管DLL不是在Dotnet环境生成的DLL文件. 托管DLL文件,可以在Dotnet环境通过 "添加引用" 的方式,直接把托管DLL文件添加到项目中.然后通过 Using DLL命 名空间,来调用相应的DLL对象 .  非托管DLL文件,在Dotnet环境应用时,通过 DllImport 调用. C# 调用非托管DLL文件.DLL文件是用C语言编写的. 托管DLL就是能够在公共

  • nginx配置proxy_pass中url末尾带/与不带/的区别详解

    nginx配置proxy_pass时url末尾带"/"与不带"/"的区别如下: 注意:当location为正则表达式匹配模式时,proxy_pass中的url末尾是不允许有"/"的,因此正则表达式匹配模式不在讨论范围内.  proxy_pass配置中url末尾带/时,nginx转发时,会将原uri去除location匹配表达式后的内容拼接在proxy_pass中url之后. 测试地址:http://192.168.171.129/test/tes

随机推荐