javascript中style.left和offsetLeft的用法说明


Posted in Javascript onMarch 07, 2014

如果父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 相关文章推荐
JavaScript Date对象使用总结
May 14 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 #Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 #Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 #Javascript
jquery中常用的函数和属性详细解析
Mar 07 #Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 #Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 #Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 #Javascript
You might like
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
vue计算属性及使用详解
2018/04/02 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python pytest进阶之fixture详解
2019/06/27 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
一封普通求职者的求职信
2013/11/20 职场文书
保研推荐信
2014/05/09 职场文书
人事任命书怎么写
2014/06/05 职场文书
美容院管理规章制度
2015/08/05 职场文书
初中班干部工作总结
2015/08/10 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
理解python中装饰器的作用
2021/07/21 Python
python计算列表元素与乘积详情
2022/08/05 Python