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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 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程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
js实现图片实时时钟
2020/01/15 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
python 二分查找和快速排序实例详解
2017/10/13 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
解决python 上传图片限制格式问题
2019/10/30 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
Python如何对XML 解析
2020/06/28 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
大学自荐信
2013/12/12 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server