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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
javascript之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
详解小程序循环require之坑
Mar 08 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
php 中include()与require()的对比
2006/10/09 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
python基础教程之字典操作详解
2014/03/25 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
python实现windows下文件备份脚本
2018/05/27 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
python操作toml文件的示例代码
2020/11/27 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
怎样写留学自荐信
2013/11/11 职场文书
单身联谊活动方案
2014/01/29 职场文书
安全环保标语
2014/06/09 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
保送生自荐信范文
2015/03/26 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers