原生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 相关文章推荐
lib.utf.js
Aug 21 Javascript
JavaScript 变量基础知识
Nov 07 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
修复IE9&safari 的sort方法
Oct 21 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
详解Vite的新体验
Feb 22 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
杏林同学录(五)
2006/10/09 PHP
php 远程图片保存到本地的函数类
2008/12/08 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
javascript闭包的高级使用方法实例
2013/07/04 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
DOM 高级编程
2015/05/06 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
用Python实现一个简单的线程池
2015/04/07 Python
Python中DJANGO简单测试实例
2015/05/11 Python
python3抓取中文网页的方法
2015/07/28 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
电子商务应届生求职信
2013/11/16 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
交通事故协议书范文
2014/04/16 职场文书
新闻发布会策划方案
2014/06/12 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript