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


Posted in Javascript onJune 08, 2016

如果父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只能读取不能配置。

Javascript 相关文章推荐
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
原生js实现选项卡功能
Mar 08 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
vue mvvm数据响应实现
Nov 11 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 #Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 #Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 #Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 #Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 #Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 #Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 #Javascript
You might like
融入意大利的咖啡文化
2021/03/03 咖啡文化
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
PHP会话处理的10个函数
2015/08/11 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
Node.js异步I/O学习笔记
2014/11/04 Javascript
再谈JavaScript线程
2015/07/10 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
python配置grpc环境
2019/01/01 Python
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
大队委竞选演讲稿
2014/04/28 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
课例研修方案
2014/05/31 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
安全教育培训制度
2015/08/06 职场文书
财产分割协议书
2016/03/22 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js