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只能读取不能配置。
JavaScript中style.left与offsetLeft的区别的更多相关文章
- [转]javascript中style.left和offsetLeft的使用
如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区 ...
- Javascript中style,currentStyle和getComputedStyle的区别以及获取css操作方法
style: 只能获取行内style. 调用:obj.style.属性; 兼容:都兼容 currentStyle: 可以获取该obj所有style,但只可读. 调用:obj.currentStyle[ ...
- JavaScript中const、var和let区别浅析
在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始 ...
- JavaScript中值类型和引用类型的区别
JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不 ...
- JavaScript中=、==、===以及!=、!==的区别与联系
JavaScript中=.==.===以及!=.!==的区别与联系 在JavaScript中,“=”代表赋值操作:“==”先转换类型再比较,“===”先判断类型,如果不是同一类型直接为false. ...
- JavaScript中object和Object有什么区别
JavaScript中object和Object有什么区别,为什么用typeof检测对象,返回object,而用instanceof 必须要接Object呢 ————————————————————— ...
- 深入理解Javascript中构造函数和原型对象的区别
在 Javascript中prototype属性的详解 这篇文章中,详细介绍了构造函数的缺点以及原型(prototype),原型链(prototype chain),构造函数(constructor) ...
- 关于javascript中apply()和call()方法的区别
如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语 ...
- javascript 中 offsetWidth,clientWidth;offsetHeight,clientHeight的区别
javascript 中 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变 clientWidth.offsetWidth.clientHeight区别IE6.0.FF ...
随机推荐
- (转载)Undefined variable: PHP_SELF的问题解决方法
(转载)http://blog.sina.com.cn/s/blog_4ab014680100gx43.html 在PHP使用了$PHP_SELF函数时,出现以下错误 Undefined variab ...
- 实现自己的脚本语言ngscript之三:语法设计
这是第四篇了,之所以隔了这么久才写,一方面是因为最近开始实习了,另一方面是因为设计语法真是要考虑很多东西. 于是我去读了这本书,里面实现了两种语言,一种跟js差不多语法,用ast解释执行:另一种语法类 ...
- lightoj 1036 dp
题目链接:http://lightoj.com/volume_showproblem.php?problem=1036 #include <cstdio> #include <cst ...
- 让nginx支持文件上传的几种模式
文件上传的几种不同语言和不同方法的总结. 第一种模式 : PHP 语言来处理 这个模式比较简单, 用的人也是最多的, 类似的还有用 .net 来实现, jsp来实现, 都是处理表单.只有语言的差别, ...
- OPC客户端的进程安全初始化
现场OPC客户端无法获取远程OPC Server列表,也无法连接OPC Server,经查调用CoCreateInstanceEx()创建IID_IOPCServerList接口正常,但调用IOPCS ...
- HDU2699+Easy
简单题. /* */ #include<stdio.h> #include<string.h> #include<stdlib.h> #include<alg ...
- Ubuntu 命令行下快速打开各类文件 分类: ubuntu shell 2014-11-18 20:06 210人阅读 评论(0) 收藏
xdg-open 命令可以用来在Ubuntu下快速打开各类文件. 下面是从 manual 文档里截取的内容: 可以知道,该命令的功能是在图形界面下按照用户的平时习惯打开各类文件,甚至是链接. 这样,我 ...
- MapReduce明星搜索指数统计,找出人气王
我们继续通过项目强化掌握Combiner和Partitioner优化Hadoop性能 1.项目介绍 本项目我们使用明星搜索指数数据,分别统计出搜索指数最高的男明星和女明星. 2.数据集 3.分析 基于 ...
- [转] 使用git自动部署简单网站
要做什么 假设你有一个博客,有一台网站服务器(或者很多台作负载均衡的服务器),当你的博客要升级时,你可能要在你自己的电脑上写好代码(可能包括本地调试好),然后提交到git(或svn),然后在每个服务器 ...
- 适配器控件-Adapter
适配器对象派生自Android.widget.Adapter,它的作用包括:构造列表项控件,并将数据项绑定到列表项控件中. 常见的适配器有:数组适配器 ArrayAdapter,数据库适配器 Curs ...