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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 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 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
php四种基础算法代码实例
2013/10/29 PHP
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
javascript的BOM汇总
2015/07/16 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
python 队列详解及实例代码
2016/10/18 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
机关作风建设整改方案
2014/10/27 职场文书
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技