JavaScript中style.left与offsetLeft的使用及区别详解


Posted in Javascript onJune 08, 2016

如果父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的区别说明如下所示:

今天在制作焦点轮播图的时候,遇到一个问题,在使用style.left获取图片的位置时,怎么也获取不到。换用offsetLeft就能够成功获取到了。虽然实现了我想要的效果,但是还是不甘心啊,没有找到原因,心里就是怪怪的,于是我翻开JavaScript高级程序设计,将style.left和offsetLeft有关的知识点都看了一下,做了如下比较。

(一)、对于style.left类属性,JavaScript高级程序是这样描述的:

任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。这个style对象是CSSStyleDeclaration的实例,包含着通过HTML的style特性指定的所有样式信息,但不包含与外部样式表或嵌入样式表经层叠而来的样式(关键就在这句话!也就是说只有设置为行内样式的style属性才能被获取)。在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性。

(二)、对于offsetLeft累属性:

offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。

通过看书和今天遇到的问题,对style.left和offsetLeft做如下总结

相同点

1、style.left与offsetLeft都是相对于其父元素的值。

不同点

1、style.left返回的是字符串,带有px;offsetLeft返回的是数值。

2、style.left时可以读取的也是可以配置的;offsetLeft只能读取不能配置。

Javascript 相关文章推荐
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
Mac中安装nvm的教程分享
Dec 11 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 #Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 #Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 #Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 #Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 #Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 #Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 #Javascript
You might like
简单的页面缓冲技术
2006/10/09 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
javascript 函数使用说明
2010/04/07 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
Python访问MySQL封装的常用类实例
2014/11/11 Python
python模拟事件触发机制详解
2018/01/19 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python实现整数的二进制循环移位
2019/03/08 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
新学期开学寄语
2014/01/18 职场文书
校园安全教育广播稿
2014/02/17 职场文书
个人求职信格式范文
2015/03/20 职场文书
纪录片信仰观后感
2015/06/08 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang
MySQL系列之六 用户与授权
2021/07/02 MySQL
js不常见操作运算符总结
2021/11/20 Javascript
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers