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

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获取页面元素位置函数(跨浏览器)

时间: 2024-10-20 12:34:09

js获取页面元素位置函数(跨浏览器)的相关文章

js获取页面元素距离浏览器工作区顶端的距离

先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)        document.documentElement.scrollTop //firefox (javascript)        document.documentElement.scrollLeft //firefox (javascript)        document.body.scro

JS获取页面元素并修改

//实现代码如下,非常简单<script> (function(){ var ele = document.getElementsByTagName("ul"); //获取页面上所有的ul元素 var target; for(var i in ele){ if("art-list"==ele[i].className){ //找到类名位art-list的ul元素 target = ele[i]; break; } } var li_arr = targe

js获取页面元素宽度、高度的方法总结

1.offsetWidth.width().clientWidth.scrollWidth offsetWidth是对象本身的宽度,包括边线滚动条等 clientWidth是对象能够被看到的宽度 clientWidth是对象内容的实际宽度 ps:$("#id").offsetWidth会返回undefined.原因:jquery选择器选择出来的元素都是数组对象,这些变量都是对一个明确的对象而言,正确写法应该是$("#id")[0].offsetWidth或者使用js

获取页面元素距离浏览器工作区顶端的距离

先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)        document.documentElement.scrollTop //firefox (javascript)        document.documentElement.scrollLeft //firefox (javascript)        document.body.scro

Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个值:" id="txt"/> <input type="button" value="按钮" id="btn"/> <script> var txt=document.getElementB

获取页面元素的几种方式

在JS中我们可以通过以下几种方式获取到页面中的元素: 1.使用id来获取对象的元素(获取到的对象元素是唯一的) document.getElementById("") 例: <input type="text" value="默认的文字" id="txt"/><input type="button" value="按钮" id="btn"/>&

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

一.样式: ? 1 2 3 4 <style> body,div{ margin:0; padding:0} .div-info{ width:200px; height:200px;border:1px solid #ccc; background:#f2f2f2; font:normal 12px/22px SimSun; position:absolute;top:200px; left:200px} </style> 二.js ? 1 2 3 4 5 6 7 8 9 10

js获取html元素? js里&quot;==&quot;和&quot;===&quot;区别?

现在的我的cpu又添加一项进程,那就是javaScript. 一.js获取html元素常用的方法: js获取html元素常用的方法有: 1)var obj = document.getElementById("#id");非常常用是通过Id来获取页面元素的. 2) var obj = document.getElementsByTagName("element");这个是通过html页面标签来获取元素的.在一个页面中相同的标签会出现很多次,如何能定位到自己想要的呢?

JS获取DOM元素的八种方法

什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE