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 RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
jquery 手势密码插件
Mar 17 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
浅谈JavaScript中this的指向更改
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
留言板翻页的实现详解
2006/10/09 PHP
附件名前加网站名
2008/03/23 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
php简单图像创建入门实例
2015/06/10 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
django 多数据库配置教程
2018/05/30 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
2014年会演讲稿范文
2014/01/06 职场文书
四年级科学教学反思
2014/02/10 职场文书
校外活动方案
2014/08/28 职场文书
求职信范文怎么写
2015/03/19 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
学习雷锋主题班会
2015/08/14 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript
vue实现滑动解锁功能
2022/03/03 Vue.js