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 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
js 小贴士一星期合集
Apr 07 Javascript
js实现div弹出层的方法
Nov 20 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 Javascript
微信小程序调用后台service教程详解
Nov 06 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
php强制更新图片缓存的方法
2015/02/11 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
php与js的区别是什么
2013/08/05 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
Three.js基础学习教程
2017/11/16 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
python基础教程之自定义函数介绍
2014/08/29 Python
深入理解python多进程编程
2016/06/12 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
Python阶乘求和的代码详解
2020/02/14 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Python devel安装失败问题解决方案
2020/06/09 Python
python 如何停止一个死循环的线程
2020/11/24 Python
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
党支部书记岗位职责
2015/02/15 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers