原生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中的ajax分页实现代码
Sep 20 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
express框架下使用session的方法
2019/07/31 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
python3调用R的示例代码
2018/02/23 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
python异步Web框架sanic的实现
2020/04/27 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
自我评价范文点评
2013/12/04 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
个人总结与自我评价
2014/09/18 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB