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脚本编程解决考试分数统计问题
Oct 18 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
实例教学如何写vue插件
Nov 30 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 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中动态显示签名和ip原理
2007/03/28 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
thinkphp分页集成实例
2017/07/24 PHP
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
Python global全局变量函数详解
2018/09/18 Python
Python用字典构建多级菜单功能
2019/07/11 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
实体的生命周期
2013/08/31 面试题
党员干部廉洁承诺书
2014/05/28 职场文书
作文评语集锦
2014/12/25 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL
php双向队列实例讲解
2021/11/17 PHP
详细介绍python操作RabbitMq
2022/04/12 Python