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获取页面元素位置函数(跨浏览器)的更多相关文章

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

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

  2. JS获取页面,元素,窗口和返回页面,元素,窗口的宽高以及滚动值

    jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window) ...

  3. js获取页面元素的位置

    一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页 ...

  4. JS获取页面元素并修改

    //实现代码如下,非常简单<script> (function(){ var ele = document.getElementsByTagName("ul"); // ...

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

    一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...

  6. JS基础入门篇( 三 )—使用JS获取页面中某个元素的4种方法以及之间的差别( 一 )

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  7. JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  8. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

  9. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

随机推荐

  1. RabbitMQ(一 初识)

    背景 在web开发过程中有遇到这样的情况:有一部分业务处理速度很慢,但它的结果对最终的返回没有影响,即使报错了,也不需要返回错误信息,只需要在另一个地方可以查询这部分业务的信息即可.例如:用户下单并成 ...

  2. Linux更改ssh端口号,很easy!

    因为公司业务需求,可能涉及到更改ssh远程的端口号,用下面方法轻松解决,废话不多说! 1.打开ssh端口配置文件:vim /etc/ssh/sshd_config,找到如下图所示的端口,改为自己想改的 ...

  3. 在VSCode中使用码云

    在VSCode中使用码云 一.SSH公钥 使用SSH公钥可以让你在你的电脑和码云通讯的时候使用安全连接(Git的Remote要使用SSH地址) 链接 https://gitee.com/profile ...

  4. 服务器操作nginx相关操作命令

    服务器操作nginx相关操作命令 登录服务器: ssh root@0.0.0.0 -p 22100 启动nginx: /usr/local/nginx/sbin/nginx 查看nginx是否启动 p ...

  5. hdu_4944_FSF’s game

    FSF has programmed a game. In this game, players need to divide a rectangle into several same square ...

  6. 交换机基础配置之stp生成树实验

    实验的要求是以上面的拓扑图为例,查看当前根桥的所在并把三成交换机switch1指定为根桥 我们可以用show spanning-tree来查看stp的信息 输入后会显示两部分 上面一部分为当前交换机自 ...

  7. 数据写入Excel

    通过xlwt这个库,可以将数据写入Excel中,而且通过xlwt写excel格式可以控制 颜色.模式.编码.背景色 下面基本上是一个练习,熟悉如何操作xlwt库的 下面是代码,所有的内容,和介绍,基本 ...

  8. 【Effective C++ 读书笔记】导读 Introduction

    学习程序语言根本大法是一回事,学习如何以某种语言设计并实现高效程序则是另一回事. 一组明智选择并精心设计的classes.functions.templates可使程序编写容易.直观.高效.并且远离错 ...

  9. elasticsearch 5.x 系列之七 基于索引别名的零停机升级服务

    一,写在前面的话,elasticsearch 建立索引时的Mapping 设置 建议你在设计索引的初期,就把索引的各个字段设计好,因为,elasticsearch 的各个字段,定义好类型后,就无法进行 ...

  10. Python学习之编程基础

    学习Python之前首先我们要了解Python是什么? question 1:Python是什么? answer:Python是一门编程语言.(什么是编程语言?) 语言:语言是不同个体之间沟通的介质. ...