原生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 相关文章推荐
修复IE9&safari 的sort方法
Oct 21 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 Javascript
JS实现扫雷项目总结
May 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 判断变量类型实现代码
2009/10/23 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
js 深拷贝函数
2008/12/04 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
JS中操作JSON总结
2020/12/06 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
python处理圆角图片、圆形图片的例子
2014/04/25 Python
python sort、sorted高级排序技巧
2014/11/21 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Python中关于使用模块的基础知识
2015/05/24 Python
Django中URLconf和include()的协同工作方法
2015/07/20 Python
Python如何发布程序的详细教程
2018/10/09 Python
python如何统计代码运行的时长
2019/07/24 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
大课间体育活动方案
2014/03/12 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
爱牙日活动总结
2014/08/29 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
公司文体活动总结
2015/05/07 职场文书
中秋晚会致辞
2015/07/31 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL