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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
Jquery api 速查表分享
Jan 12 Javascript
javascript相关事件的几个概念
May 21 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
vue-列表下详情的展开与折叠案例
Jul 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
PHP exif扩展方法开启详解
2014/07/28 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
Python编程之多态用法实例详解
2015/05/19 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
精选干货:Java精选笔试题附答案
2014/01/18 面试题
安全教育心得体会
2013/12/29 职场文书
演讲稿格式范文
2014/05/19 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
党员三严三实心得体会
2014/10/13 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL