原生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 相关文章推荐
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
vue2.0模拟锚点的实例
Mar 14 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
一个用php3编写的简单计数器
2006/10/09 PHP
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP实现懒加载的方法
2015/03/07 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Python中import机制详解
2017/11/14 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
python实现共轭梯度法
2019/07/03 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
客服主管岗位职责
2013/12/13 职场文书
四好少年事迹材料
2014/01/12 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
环保小标语
2014/06/13 职场文书
贷款委托书怎么写
2014/08/02 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
教师见习报告范文
2014/11/03 职场文书
部队2015年终工作总结
2015/04/02 职场文书
运动员加油词
2015/07/18 职场文书
预备党员表决心的话
2015/09/22 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题