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初学者的编写开发的七个细节
Jan 11 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
JS数组的常见用法实例
Feb 10 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
Javascript文本框脚本实现方法解析
Oct 30 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
vue实现通讯录功能
2018/07/14 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
python实现随机密码字典生成器示例
2014/04/09 Python
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Python中用Spark模块的使用教程
2015/04/13 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
详解python中eval函数的作用
2019/10/22 Python
python实现简单学生信息管理系统
2020/04/09 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
英国著名书店:Foyles
2018/12/01 全球购物
一套.net面试题及答案
2016/11/02 面试题
超市实习总结自我鉴定
2013/09/19 职场文书
安全检查验收制度
2014/01/12 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
团日活动总结书格式
2014/05/08 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python