今天在制作焦点轮播图的时候,遇到一个问题,在使用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的区别的更多相关文章

  1. [转]javascript中style.left和offsetLeft的使用

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

  2. Javascript中style,currentStyle和getComputedStyle的区别以及获取css操作方法

    style: 只能获取行内style. 调用:obj.style.属性; 兼容:都兼容 currentStyle: 可以获取该obj所有style,但只可读. 调用:obj.currentStyle[ ...

  3. JavaScript中const、var和let区别浅析

    在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始 ...

  4. JavaScript中值类型和引用类型的区别

    JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不 ...

  5. JavaScript中=、==、===以及!=、!==的区别与联系

    JavaScript中=.==.===以及!=.!==的区别与联系   在JavaScript中,“=”代表赋值操作:“==”先转换类型再比较,“===”先判断类型,如果不是同一类型直接为false. ...

  6. JavaScript中object和Object有什么区别

    JavaScript中object和Object有什么区别,为什么用typeof检测对象,返回object,而用instanceof 必须要接Object呢 ————————————————————— ...

  7. 深入理解Javascript中构造函数和原型对象的区别

    在 Javascript中prototype属性的详解 这篇文章中,详细介绍了构造函数的缺点以及原型(prototype),原型链(prototype chain),构造函数(constructor) ...

  8. 关于javascript中apply()和call()方法的区别

    如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语 ...

  9. javascript 中 offsetWidth,clientWidth;offsetHeight,clientHeight的区别

    javascript 中 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变 clientWidth.offsetWidth.clientHeight区别IE6.0.FF ...

随机推荐

  1. 支付宝APP支付(Java后台生成签名具体步骤)

    /** *支付宝支付 * @param orderId 订单编号 * @param actualPay 实际支付金额 * @return */ private String getOrderInfoB ...

  2. ORA-12541: TNS: 无监听程序 怎么解决

    ORA-12541: TNS: 无监听程序 怎么解决? 刚学 oracle ORA-12541: TNS怎么回事,已经打开了所有的服务 fzxs 2008-3-14 下载知道客户端,10分钟内有问必答 ...

  3. Hadoop yarn配置参数

    参照site:http://hadoop.apache.org/docs/r2.6.0/hadoop-yarn/hadoop-yarn-common/yarn-default.xml 我们在配置yar ...

  4. 怎样打开64位 Ubuntu 的32位支持功能?

    怎样打开64位 Ubuntu 的32位支持功能? 现在有一个让你可以在64位系统中使用32位软件的方法,就在你读了这篇文章然后照着做了之后就可以了.如果你有一个13.10或更高版本的Ubuntu/De ...

  5. 模糊化GPU滤镜汇总

    GPUImageTiltShiftFilter 这是一个模糊图片上下两层的滤镜效果,可以调节模糊边界,可以调节模糊程度 总共4个参数,具体如下     //模糊度的调节,0为最清晰,后面越来越模糊   ...

  6. 文件夹oradiag_是如何产生的

    如果sqlnet.ora不可用或者ADR_BASE参数未定义,那么11g的 SQL*Net将创建这些文件夹 (详情:http://download.oracle.com/docs/cd/B28359_ ...

  7. 从Java视角理解CPU上下文切换(Context Switch)

    从Java视角理解系统结构连载, 关注我的微博(链接)了解最新动态   在高性能编程时,经常接触到多线程. 起初我们的理解是, 多个线程并行地执行总比单个线程要快, 就像多个人一起干活总比一个人干要快 ...

  8. Installing scikit-learn

    Installing scikit-learn http://scikit-learn.org/stable/install.html Installing scikit-learn There ar ...

  9. jquery 弹出层

    <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">   ...

  10. Qt 线程基础(Thread Basics的翻译,线程的五种使用情况)

    Qt 线程基础(QThread.QtConcurrent等) 转载自:http://blog.csdn.net/dbzhang800/article/details/6554104 昨晚看Qt的Man ...