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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 Javascript
Ajax异步刷新功能及简单案例
Nov 20 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
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
python pygame实现2048游戏
2018/11/20 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
python编写计算器功能
2019/10/25 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
博士学位自我鉴定范文
2013/12/26 职场文书
2014年个人售房协议书
2014/10/30 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
如何理解及使用Python闭包
2021/06/01 Python
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL