编程 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 相关文章推荐

js输出阴历、阳历、年份、月份、周示例代码

Jan 29 Javascript

js浏览器本地存储store.js介绍及应用

May 13 Javascript

jquery重复提交请求的原因浅析

May 23 Javascript

js实现刷新iframe的方法汇总

Apr 27 Javascript

javascript弹性运动效果简单实现方法

Jan 08 Javascript

javascript的理解及经典案例分析

May 20 Javascript

JS编写函数实现对身份证号码最后一位的验证功能

Dec 29 Javascript

原生js实现选项卡功能

Mar 08 Javascript

利用Angular+Angular-Ui实现分页（代码加简单）

Mar 10 Javascript

实现图片首尾平滑轮播(JS原生方法—节流)

Oct 17 Javascript

JS实现transform实现扇子效果

Jan 17 Javascript

手把手教您实现react异步加载高阶组件

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与MySQL开发中页面乱码的产生与解决

2008/03/27 PHP

PHP实现自动识别Restful API的返回内容类型

2015/02/07 PHP

PHP实现小偷程序实例

2016/10/31 PHP

thinkPHP批量删除的实现方法分析

2016/11/09 PHP

php数组指针操作详解

2017/02/14 PHP

php从数据库中获取数据用ajax传送到前台的方法

2018/08/20 PHP

laravel框架 laravel-admin上传图片到oss的方法

2019/10/13 PHP

cnblogs中在闪存中屏蔽某人的实现代码

2010/11/14 Javascript

为JS扩展Array.prototype.indexOf引发的问题探讨及解决

2013/04/24 Javascript

深入理解react-router@4.0 使用和源码解析

2017/05/23 Javascript

快速搭建vue2.0+boostrap项目的方法

2018/04/09 Javascript

electron实现静默打印的示例代码

2019/08/12 Javascript

weui中的picker使用js进行动态绑定数据问题

2019/11/06 Javascript

用Node写一条配置环境的指令

2019/11/14 Javascript

Python实现的简单算术游戏实例

2015/05/26 Python

浅谈django中的认证与登录

2016/10/31 Python

Tensorflow的可视化工具Tensorboard的初步使用详解

2018/02/11 Python

python pyenv多版本管理工具的使用

2019/12/23 Python

Linux下升级安装python3.8并配置pip及yum的教程

2020/01/02 Python

Python unittest discover批量执行代码实例

2020/09/08 Python

python 爬虫请求模块requests详解

2020/12/04 Python

Python datetime模块的使用示例

2021/02/02 Python

css3 transform属性详解

2014/09/30 HTML / CSS

伦敦平价潮流珠宝首饰品牌：Astrid & Miyu

2016/10/10 全球购物

亚马逊中国官方网站：amazon.cn

2017/05/25 全球购物

单位未婚证明范本

2014/01/18 职场文书

行政秘书工作自我鉴定

2014/09/15 职场文书

2014年环境整治工作总结

2014/12/10 职场文书

五年级学生评语大全

2014/12/26 职场文书

2015年国税春训心得体会

2015/03/09 职场文书

文艺演出主持词

2015/07/01 职场文书

祝寿主持词

2015/07/02 职场文书

应届生们该怎么书写求职信？

2019/07/05 职场文书

Python网络编程之ZeroMQ知识总结

2021/04/25 Python

如何解决flex文本溢出问题小结

2022/07/15 HTML / CSS

CSS 鼠标点击拖拽效果的实现代码

2022/12/24 HTML / CSS