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 相关文章推荐
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 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 fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
Python中用于返回绝对值的abs()方法
2015/05/14 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
创先争优制度
2014/01/21 职场文书
党员组织关系介绍信
2014/02/13 职场文书
文秘求职信范文
2014/04/10 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
家长反馈意见及建议
2015/06/03 职场文书
2015年中秋寄语
2015/07/31 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
世界文化遗产导游词
2019/08/07 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS