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 ...
随机推荐
- 【HDOJ】2830 Matrix Swapping II
简单DP. /* 2830 */ #include <iostream> #include <string> #include <map> #include < ...
- 【转】使用命令行方式创建和启动android模拟器
原文网址:http://blog.csdn.net/tiandinilv/article/details/8953001 1.Android模拟器介绍 Android中提供了一个模拟器来模拟ARM核的 ...
- Spark SQL inferSchema实现原理探微(Python)
使用Spark SQL的基础是“注册”(Register)若干表,表的一个重要组成部分就是模式,Spark SQL提供两种选项供用户选择: (1)applySchema applySche ...
- (转载)MySQL默认INFORMATION_SCHEMA,MySQL,TEST三个数据库用途
(转载)http://www.45it.com/database/201204/29390.htm 本文简要说明了MySQL数据库安装好后自带的INFORMATION_SCHEMA,MySQL,TES ...
- 使用LoadRunner对Web Services进行调用--Import Soap
利用LoadRunner对Web Services进行测试时,通常有三种可供采用的方法: 在LoadRunner的Web Services虚拟用户协议中,[Add Service Call] 在Loa ...
- GraphViz特性笔记(一)
默认纵向,使用“rankdir="LR";”可使视图横向排列: 定义节点可以单独列出,“0;”方便自动生成: “edge[fontname="微软雅黑"];”设 ...
- 钥匙计数之一 - HDU 1438(状态压缩打表)
分析:首先想到每个钥匙的结尾有4种状态,不过题目还需要判断有三种不同的钥匙深度,所以每种深度结尾后有2^4种状态,0000->1111,不过题目还需需要有相邻的钥匙深度大于等于3,所以需要两种不 ...
- hibernate一对多关系映射(自身关联)
示例:一个类别(Category)下面有多个子类别,多个子类别属于同一个父类别. public class Category { private Integer id; private String ...
- 【Android - 框架】之刷新加载框架Ultra-Pull-To-Refresh的使用
Ultra-Pull-To-Refresh框架是用来嵌套其他布局,实现下拉刷新和上拉加载的框架.它其中可以嵌套任何控件,ListView.GridView.ScrollView.RecyclerVie ...
- Unity 读取、写入自定义路径文件,调用System.Windows.Forms
调用System.Windows.Forms DLL 首先在Unity新建Plugins文件夹添加System.Windows.Forms.dll 然后代码中添加引用 using System; us ...