原生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 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
Javascript 构造函数 实例分析
Nov 26 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
认识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
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
javascript数组去掉重复
2011/05/12 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
python3.0 字典key排序
2008/12/24 Python
10款最好的Web开发的 Python 框架
2015/03/18 Python
Python文件及目录操作实例详解
2015/06/04 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
python基础 range的用法解析
2019/08/23 Python
详解Python中的Lock和Rlock
2021/01/26 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
个人求职自荐信范文
2015/03/06 职场文书
化验室安全管理制度
2015/08/06 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
vue3不同环境下实现配置代理
2022/05/25 Vue.js