原生js获取left值和top值的三种方法
2017-08-02 08:42
656 查看
在用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值的三种方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- js浏览器滚动条卷去的高度scrolltop(实例讲解)
- Javascript实现的StopWatch功能示例
- JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
- js中scrollTop()方法和scroll()方法用法示例
- 深入浅析JavaScript中的scrollTop
- js+css实现回到顶部按钮(back to top)
- 使用堆实现Top K算法(JS实现)
- 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
- js中不同的height, top的区别对比
- javascript获取图片的top N主色值方法详解
相关文章推荐
- 原生JS获取ScrollTop/ScrollLeft
- 具有绝对定位的标签元素使用原生js获取其left,top的值
- 【JavaScript】 JS中获取HTML元素值的三种方法
- 原生Js获取元素样式属性值的方法
- IE9下,原生JS设置元素left和top属性为数值不生效
- 原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y
- 【转】获取到元素的 offsetLeft 、offsetTop属性不正常的解决方法。
- 现代浏览器原生js获取id号方法
- 获取坐标的getTop getLeft getX getRawX系列方法
- 获取页面中被选中元素的 JS原生方法 与 jQuery方法 分析
- 原生JS获取元素的位置与尺寸实现方法
- 三种方法用JS获取地址栏参数的方法(正则超级简单)
- 原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
- 获取坐标的getTop getLeft getX getRawX系列方法
- js jquery获取随机生成id的服务器控件的三种方法
- 原生js封装table表格操作,获取任意行列td,任意单行单列方法
- 获取坐标的getTop getLeft getX getRawX系列方法
- 原生js获取事件发生对象兼容处理方法
- Node.js express获取参数有三种方法
- JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值