原生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基础教程之关键字和保留字汇总
Jan 18 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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中上传多个文件的表单设计例子
2014/11/19 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
php时间函数用法分析
2016/05/28 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
js实现继承的5种方式
2015/12/01 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
PyMongo安装使用笔记
2015/04/27 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
python命令 -u参数用法解析
2019/10/24 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
优秀中学生事迹材料
2014/01/31 职场文书
低碳生活倡议书
2014/04/14 职场文书
大学生安全责任书
2014/07/25 职场文书
小学班级特色活动方案
2014/08/31 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
活动经费申请报告
2015/05/15 职场文书
简短清晨问候语
2015/11/10 职场文书
导游词之上海豫园
2019/10/24 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python