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 面向对象全新理练之数据的封装
Dec 03 Javascript
JqGrid web打印实现代码
May 31 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
URL中“#” “?” &“”号的作用浅析
Feb 04 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
javascript头像上传代码实例
Sep 28 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
短波问题解答
2021/02/28 无线电
MySQL 日期时间函数常用总结
2012/06/12 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
Js 中debug方式
2010/02/07 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
Python中除法使用的注意事项
2014/08/21 Python
浅谈python中set使用
2016/06/30 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
python迭代器常见用法实例分析
2019/11/22 Python
python分布式计算dispy的使用详解
2019/12/22 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
毕业生写求职信的要点
2014/03/04 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
办公室卫生管理制度
2015/08/04 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
python中的3种定义类方法
2021/11/27 Python
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电