原生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验证表单第二部分
Nov 25 Javascript
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 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读取3389的脚本
2014/05/06 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
Python中__name__的使用实例
2015/04/14 Python
儿童学习python的一些小技巧
2018/05/27 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
python实现函数极小值
2019/07/10 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python实现udp传输图片功能
2020/03/20 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
this关键字的含义
2015/04/08 面试题
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
学生手册评语
2014/05/05 职场文书
情况说明书格式范文
2014/05/06 职场文书
端午节活动总结
2014/08/26 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android
win7配置本地ftp服务器的图文教程
2022/08/05 Servers