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 相关文章推荐
Javascript 写的简单进度条控件
Jan 22 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
关于js datetime的那点事
Nov 15 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 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
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
php 的反射详解及示例代码
2016/08/25 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
layui使用label标签的方法
2019/09/14 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
Python itertools模块详解
2015/05/09 Python
Python简单实现enum功能的方法
2016/04/25 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Django REST framework内置路由用法
2019/07/26 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
毕业生护理专业个人求职信范文
2014/01/04 职场文书
求职导师推荐信范文
2015/03/27 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python