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 控制弹出窗口
Apr 10 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
详解Javascript继承的实现
Mar 25 Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
js实现复制粘贴的两种方法
Dec 04 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魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
JS实现密码框效果
2020/09/10 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python生成pdf文件的方法
2014/08/04 Python
python获取本地计算机名字的方法
2015/04/29 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
应聘收银员个人的求职信
2013/11/30 职场文书
物流司机岗位职责
2013/12/28 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
租房协议书
2014/09/12 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
win7配置本地ftp服务器的图文教程
2022/08/05 Servers
MySQL数据管理操作示例讲解
2022/12/24 MySQL