原生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 相关文章推荐
js中创建对象的几种方式示例介绍
Jan 26 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
JavaScript代码实现简单计算器
Dec 27 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性能优化准备篇图解PEAR安装
2011/12/05 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
python交互式图形编程实例(二)
2017/11/17 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python实现代码统计器
2019/09/19 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
CK美国官网:Calvin Klein
2016/08/26 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
毕业设计说明书
2014/05/07 职场文书
学校督导评估方案
2014/06/10 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
整改报告怎么写
2014/11/06 职场文书
法律意见书范本
2015/06/04 职场文书
用python自动生成日历
2021/04/24 Python
React四级菜单的实现
2022/04/08 Javascript