编程 Javascript

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中style.left和offsetLeft的用法说明

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript中日期转换成时间戳的小例子

Mar 21 Javascript

Javascript排序算法之计数排序的实例

Apr 05 Javascript

谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)

Oct 01 Javascript

【经验总结】编写JavaScript代码时应遵循的14条规律

Jun 20 Javascript

Vuejs第九篇之组件作用域及props数据传递实例详解

Sep 05 Javascript

javascript特殊文本输入框网页特效

Sep 13 Javascript

关于Vue实现组件信息的缓存问题

Aug 23 Javascript

使用layui 渲染table数据表格的实例代码

Aug 19 Javascript

Vue监听一个数组id是否与另一个数组id相同的方法

Sep 26 Javascript

JavaScript ES6中的简写语法总结与使用技巧

Dec 30 Javascript

vue.js实现的幻灯片功能示例

Jan 18 Javascript

localstorage实现带过期时间的缓存功能

Jun 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

在PHP3中实现SESSION的功能（一）

2006/10/09 PHP

PHP中的extract的作用分析

2008/04/09 PHP

destoon实现调用自增数字从1开始的方法

2014/08/21 PHP

基于javascript的JSON格式页面展示美化方法

2014/07/02 Javascript

jQuery实现统计复选框选中数量

2014/11/24 Javascript

node.js中的console.dir方法使用说明

2014/12/10 Javascript

jquery中ajax跨域方法实例分析

2015/12/18 Javascript

微信小程序 wxapp地图 map详解

2016/10/31 Javascript

Vue.js自定义指令的用法与实例解析

2017/01/18 Javascript

JS实现碰撞检测的方法分析

2018/01/19 Javascript

JavaScript 高性能数组去重的方法

2018/09/20 Javascript

新手如何快速理解js异步编程

2019/06/24 Javascript

swiper Scrollbar滚动条组件详解

2019/09/08 Javascript

解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

2019/10/11 Javascript

详解Vue中的MVVM原理和实现方法

2020/07/15 Javascript

Python 获取新浪微博的最新公共微博实例分享

2014/07/03 Python

使用Python内置的模块与函数进行不同进制的数的转换

2016/03/12 Python

Python中的is和==比较两个对象的两种方法

2017/09/06 Python

详解用python计算阶乘的几种方法

2019/08/14 Python

Python使用APScheduler实现定时任务过程解析

2019/09/11 Python

tensorflow实现在函数中用tf.Print输出中间值

2020/01/21 Python

Python 爬虫的原理

2020/07/30 Python

python 模拟登陆163邮箱

2020/12/15 Python

Ted Baker英国官网：男士和女士服装及配件

2017/03/13 全球购物

Ticketmaster意大利：音乐会、节日、艺术和剧院的官方门票

2019/12/23 全球购物

网络编程中设计并发服务器，使用多进程与多线程，请问有什么区别？

2016/03/27 面试题

介绍一下Linux内核的排队自旋锁

2014/08/27 面试题

就业推荐表自我鉴定

2014/03/21 职场文书

数控技校生自我鉴定

2014/04/19 职场文书

投标人法定代表人授权委托书格式

2014/09/28 职场文书

初中生旷课检讨书范文

2014/10/06 职场文书

离婚财产分配协议书

2014/10/21 职场文书

委托培训协议书

2014/11/17 职场文书

巾帼文明岗汇报材料

2014/12/24 职场文书

幼儿园教师节感谢信

2015/01/23 职场文书

javascript对象3个属性特征

2021/11/17 Javascript