编程 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代码

Mar 16 Javascript

基于jquery.Jcrop的头像编辑器

Mar 01 Javascript

Jquery api 速查表分享

Jan 12 Javascript

javascript相关事件的几个概念

May 21 Javascript

JS数字千分位格式化实现方法总结

Dec 16 Javascript

JavaScript利用Date实现简单的倒计时实例

Jan 12 Javascript

JavaScript实现网页头部进度条刷新

Apr 16 Javascript

jQury Ajax使用Token验证身份实例代码

Sep 22 Javascript

基于vue1和vue2获取dom元素的方法

Mar 17 Javascript

微信小程序学习笔记之本地数据缓存功能详解

Mar 29 Javascript

vue中 v-for循环的用法详解

Feb 19 Javascript

vue-列表下详情的展开与折叠案例

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

PHP exif扩展方法开启详解

2014/07/28 PHP

Laravel使用模型实现like模糊查询的例子

2019/10/24 PHP

jQuery 使用手册(六)

2009/09/23 Javascript

基于jQuery的可用于选项卡及幻灯的切换插件

2011/03/28 Javascript

jQuery的:parent选择器定义和用法

2014/07/01 Javascript

JavaScript原生对象之Number对象的属性和方法详解

2015/03/13 Javascript

javascript实现数组去重的多种方法

2016/03/14 Javascript

AngularJS中的$watch()，$digest()和$apply()区分

2016/04/04 Javascript

使用Web Uploader实现多文件上传

2016/06/08 Javascript

picLazyLoad 实现图片延时加载(包含背景图片)

2016/07/21 Javascript

JavaScript 随机验证码的生成实例代码

2016/09/22 Javascript

Bootstrap源码解读标签、徽章、缩略图和警示框（8）

2016/12/26 Javascript

Webpack path与publicPath的区别详解

2018/05/03 Javascript

vue通过滚动行为实现从列表到详情,返回列表原位置的方法

2018/08/31 Javascript

vue-router的两种模式的区别

2019/05/30 Javascript

JS 5种遍历对象的方式

2020/06/16 Javascript

Python编程之多态用法实例详解

2015/05/19 Python

python微信跳一跳游戏辅助代码解析

2018/01/29 Python

Python实现的径向基（RBF）神经网络示例

2018/02/06 Python

Python 输入一个数字判断成绩分数等级的方法

2018/11/15 Python

python直接获取API传递回来的参数方法

2018/12/17 Python

python 求一个列表中所有元素的乘积实例

2019/06/11 Python

Python可变对象与不可变对象原理解析

2020/02/25 Python

pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异

2021/02/25 Python

资生堂英国官网：Shiseido英国

2020/12/30 全球购物

介绍java中初始化块的使用

2012/09/11 面试题

精选干货：Java精选笔试题附答案

2014/01/18 面试题

安全教育心得体会

2013/12/29 职场文书

演讲稿格式范文

2014/05/19 职场文书

教师作风整改措施思想汇报

2014/10/12 职场文书

党员三严三实心得体会

2014/10/13 职场文书

2014年城市管理工作总结

2014/12/02 职场文书

采购部2015年度工作总结

2015/07/24 职场文书

加薪申请书应该这样写！

2019/07/04 职场文书

公司要求试用期员工提交“述职报告”，该怎么写？

2019/07/17 职场文书

MySQL 数据库增删查改、克隆、外键等操作

2022/05/11 MySQL