原生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 函数参数限制说明
Nov 19 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
详解Vue中的Props与Data细微差别
Mar 02 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
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
ES6中数组array新增方法实例总结
2017/11/07 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python扩展内置类型详解
2018/03/26 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
python实现键盘控制鼠标移动
2020/11/27 Python
Python之列表实现栈的工作功能
2019/01/28 Python
Python pandas用法最全整理
2019/08/04 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
中学生运动会通讯稿大全
2014/09/18 职场文书
公司考勤管理制度
2015/08/04 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
PHP基本语法
2021/03/31 PHP
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技