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中日期转换成时间戳的小例子
Mar 21 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
PHP中的extract的作用分析
2008/04/09 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
Python 爬虫的原理
2020/07/30 Python
python 模拟登陆163邮箱
2020/12/15 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
就业推荐表自我鉴定
2014/03/21 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
离婚财产分配协议书
2014/10/21 职场文书
委托培训协议书
2014/11/17 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
javascript对象3个属性特征
2021/11/17 Javascript