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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
JavaScript原型链详解
Nov 07 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中的ini配置原理详解
2014/10/14 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
python常规方法实现数组的全排列
2015/03/17 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
什么是网络协议
2016/04/07 面试题
运动会通讯稿300字
2014/02/02 职场文书
教师节促销活动方案
2014/02/14 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
个人股份合作协议书
2014/10/24 职场文书
优秀教师事迹材料
2014/12/15 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers