js获取页面元素位置函数

原创 2007年09月23日 22:05:00
 用Javascript获取指定页面元素的位置是一个非常常见的需求,本文介绍的函数能够准确返回一个元素相对于整个文档左上角的坐标,即元素的 top 、left 的位置,而且能够兼容浏览器,相信对新手非常有用。

function getElementPos(elementId) {
 var ua = navigator.userAgent.toLowerCase();
 var isOpera = (ua.indexOf('opera') != -1);
 var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
 var el = document.getElementById(elementId);
 if(el.parentNode === null || el.style.display == 'none') {
  return false;
 }     
 var parent = null;
 var pos = [];    
 var box;    
 if(el.getBoundingClientRect)    //IE
 {         
  box = el.getBoundingClientRect();
  var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
  var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
  return {x:box.left + scrollLeft, y:box.top + scrollTop};
 }else if(document.getBoxObjectFor)    // gecko   
 {
  box = document.getBoxObjectFor(el);
  var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
  var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
  pos = [box.x - borderLeft, box.y - borderTop];
 } else    // safari & opera   
 {
  pos = [el.offsetLeft, el.offsetTop]; 
  parent = el.offsetParent;    
  if (parent != el) {
   while (parent) { 
    pos[0] += parent.offsetLeft;
    pos[1] += parent.offsetTop;
    parent = parent.offsetParent;
   } 
  }  
  if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) {
   pos[0] -= document.body.offsetLeft;
   pos[1] -= document.body.offsetTop;        
  }   
 }             
 if (el.parentNode) {
    parent = el.parentNode;
   } else {
    parent = null;
   }
 while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors
  pos[0] -= parent.scrollLeft;
  pos[1] -= parent.scrollTop;
  if (parent.parentNode) {
   parent = parent.parentNode;
  } else {
   parent = null;
  }
 }
 return {x:pos[0], y:pos[1]};
}

使用示例

var pos=getElementPos("divId");
alert("距左边距离"+ pos.x +",距上边距离"+pos.y);

js获取页面元素的位置

一、网页的大小和浏览器窗口的大小 首先,要明确两个基本概念。 一张网页的全部面积,就是它的大小。通常情况下,网页的大小由内容和CSS样式表决定。 浏览器窗口的大小,则是指在浏览器窗口中看到的那部...
  • Inuyasha1121
  • Inuyasha1121
  • 2015年10月15日 10:11
  • 2160

Javascript getBoundingClientRect()来获取元素在页面的位置

语法EDIT rectObject = object.getBoundingClientRect(); 返回 返回值是一个DOMRect对象,这个对象是由该元素的 getClientRects...
  • ssisse
  • ssisse
  • 2016年08月25日 10:07
  • 762

js获取页面元素和鼠标的点击位置

前端一些页面效果实现时,往往需要操作大量的DOM对象,即要在某个特定的位置显示某个元素。如:在鼠标点击的位置显示,就要获取当前鼠标的位置。1 获取鼠标点击位置JavaScript 获取鼠标点击位置坐标...
  • qq_30051139
  • qq_30051139
  • 2016年12月27日 16:45
  • 815

js获取dom元素绝对位置

http://www.51xuediannao.com/qd63/index.php/page-2-82-1.html 获取元素的位置属性可以通过 HTMLElement....
  • NRlovestudy
  • NRlovestudy
  • 2016年04月29日 17:33
  • 3113

使用JS取得焦点(focus)元素

原文链接: Get the Focused Element with JavaScript 原文日期: 2014年3月19日 翻译日期: 2014年3月21日 翻译人员: 铁锚 对于良好的用户体验来...
  • renfufei
  • renfufei
  • 2014年03月21日 20:29
  • 14939

js获取页面元素位置函数(浏览器兼容)

 "http://www.w3.org/TR/html4/loose.dtd">afunction getElementPos(elementId) {var ua = navigator.userA...
  • libailin
  • libailin
  • 2009年02月08日 10:49
  • 557

js中获取元素的当前位置

js中获取当前位置有如下几种方法: event.offsetWidth, event.offsetHeight, event.clientX, event.clienY, event.scrennX,...
  • qq_35534823
  • qq_35534823
  • 2016年10月24日 16:23
  • 4144

JavaScript获取页面大小,滚动条位置,元素位置

//页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {...
  • lovegonghui
  • lovegonghui
  • 2015年09月08日 11:25
  • 1134

JavaScript 获取鼠标及元素在页面上的位置

JavaScript获取鼠标的位置,大家会想到clientX/Y等属性,灵活的获取鼠标的位置信息,能够便于我们实现各种复杂的页面交互效果,到底还有哪些属性可以获取鼠标的位置信息?另外,还有哪些能快速获...
  • u013063153
  • u013063153
  • 2016年09月27日 09:44
  • 3943

JS获取鼠标位置、当前元素所在位置

JS获取鼠标位置,当前元素的top left width height //获取元素的绝对位置,大小。 参数js对象 function getElAbsolute(elem) { var t ...
  • CommandBaby
  • CommandBaby
  • 2016年05月16日 16:40
  • 5981
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js获取页面元素位置函数
举报原因:
原因补充:

(最多只允许输入30个字)