原生js获取left值和top值的三种方法


Posted in Javascript onAugust 02, 2017

在用js做动态效果时,通常需要获取元素绝对定位中的left和top属性值。比如做一个碰撞广告,就要不停的获取元素的top和left属性值。

需要注意的事:取值的元素必须要设置position:absolute绝对定位属性,才能取的到left值。

第一种方法,比较简单,就是直接通过obj.style.left和obj.style.top,但是有局限性,这种获取的方法只能获取到行内样式的left和top的属性值,不能获取到style标签和link 外部引用的left和top属性值。

第二种方法 只读,可以获取所有style样式,存在兼容性问题,在标准浏览器中可以通过window.getComputedStyle(对象,null).left方法来获取元素的left和top的属性值。而在IE浏览器上则是采用obj.currentStyle.left方法来获取属性值。

第三种方法,使用obj.offsetLeft来获取对象的left属性值,用obj.offsetTop来获取对象的top属性值。

以上这篇原生js获取left值和top值的三种方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery操作select option 的代码小结
Jun 21 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
Vue组件库发布到npm详解
Feb 17 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
Vue获取微博授权URL代码实例
Nov 04 Javascript
简单聊聊TypeScript只读修饰符
Apr 06 Javascript
认识less和webstrom的less配置方法
Aug 02 #Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 #jQuery
详解基于node的前端项目编译时内存溢出问题
Aug 01 #Javascript
javascript 中select框触发事件过程的分析
Aug 01 #Javascript
谈谈对vue响应式数据更新的误解
Aug 01 #Javascript
详解jquery选择器的原理
Aug 01 #jQuery
浅谈node中的exports与module.exports的关系
Aug 01 #Javascript
You might like
重置版宣传动画
2020/04/09 魔兽争霸
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
详解Python装饰器由浅入深
2016/12/09 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
Python中作用域的深入讲解
2018/12/10 Python
详解python-图像处理(映射变换)
2019/03/22 Python
使用python模拟命令行终端的示例
2019/08/13 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
软件工程师面试题
2012/06/25 面试题
2015年城市管理工作总结
2015/05/23 职场文书
同学聚会祝酒词
2015/08/10 职场文书
重阳节主题班会
2015/08/17 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
创业计划书之便利店
2019/09/05 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏