夏日博客

A-A+

JavaScript 获取页面元素的offset值代码

2016年10月16日 前端设计 暂无评论 阅读 5 views 次

本文章来给大家介绍JavaScript 获取页面元素的offset值代码，有需要了解offset获取的方法朋友可进入参考参考。

js获取方法,代码如下:

document.getElementById("divFloat").style.top=document.getElementById("Button").offsetLeft+25;

用IETester和FireFox再测试下,IE6+下都可以,如以前一样，写出的纯js的方法无情地被FireFox鄙视了，获取的值不正确。

网上再查了下,发现应该这样写,通过循环,层层向上计算,最后得到准确的offset值.

js获取网页控件的offset值的方法,代码如下:

  1. //Colour pallete top offset   
  2. function getOffsetTop(elm) {   
  3.     var mOffsetTop = elm.offsetTop;   
  4.     var mOffsetParent = elm.offsetParent;   
  5.     while(mOffsetParent) {   
  6.         mOffsetTop += mOffsetParent.offsetTop;   
  7.         mOffsetParent = mOffsetParent.offsetParent;   
  8.     }   
  9.     return mOffsetTop;   
  10. }  
  11. //Colour pallete left offset   
  12. function getOffsetLeft(elm) {   
  13.     var mOffsetLeft = elm.offsetLeft;   
  14.     var mOffsetParent = elm.offsetParent;   
  15.     while(mOffsetParent) {   
  16.         mOffsetLeft += mOffsetParent.offsetLeft;   
  17.         mOffsetParent = mOffsetParent.offsetParent;   
  18.     }   
  19.     return mOffsetLeft;   
  20. }  function ie_y(e) {    
  21.     var t=e.offsetTop;    
  22.     while(e=e.offsetParent) {    
  23.         t+=e.offsetTop;    
  24.     }    
  25.     return t;    
  26. } //xiariboke.net  
  27. function ie_x(e) {    
  28.     var l=e.offsetLeft;    
  29.     while(e=e.offsetParent) {    
  30.         l+=e.offsetLeft;    
  31.     }    
  32.     return l;    
  33. }  

jQuery的实现,再细一步去查相关问题时发现jQuery中已经包含了实现此功能的函数：offset()，很好地兼容了各浏览器,代码如下:

$("#Button").offset().left

个人更喜欢使用jquery这个功能了，因为代码简单明了哦，兼容性强。

标签：

给我留言