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事件处理器中的event参数使用介绍
May 24 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
基于node实现websocket协议
Apr 25 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 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上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
Bootstrap精简教程
2015/11/27 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
flask中的wtforms使用方法
2018/07/21 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
python压包的概念及实例详解
2021/02/17 Python
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
财务工作者先进事迹材料
2014/01/17 职场文书
职工趣味运动会方案
2014/02/10 职场文书
现场施工员岗位职责
2014/03/10 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
使用Ajax实现进度条的绘制
2022/04/07 Javascript