原生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实现自定义风格的滑动条实现代码
Apr 26 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
js实现网页随机验证码
Oct 19 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引用的调用方法分析
2016/04/25 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
js三种排序算法分享
2012/08/16 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
使用grappelli为django admin后台添加模板
2014/11/18 Python
Python实现提取文章摘要的方法
2015/04/21 Python
python批量制作雷达图的实现方法
2016/07/26 Python
python使用代理ip访问网站的实例
2018/05/07 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
Python面试题集
2012/03/08 面试题
2015年办公室工作总结范文
2015/03/31 职场文书
朋友聚会开场白
2015/06/01 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers