JS code:

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 = ;
}
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]};
}

js各浏览器兼容取的元素的位置X坐标 Y坐标的更多相关文章

  1. 原生JS 获取浏览器、窗口、元素等尺寸的方法及注意事项

    一.通过浏览器获得屏幕的尺寸 screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去 ...

  2. js中浏览器兼容startsWith 、endsWith 函数

    在做js开发的时候用到了startsWith函数时,发现各个浏览器不兼容问题,因为对开发来说,chrome浏览器最好用,就一直在chrome浏览器中使用这两个函数没有任何问题,但在ie浏览器访问就直接 ...

  3. js实现浏览器兼容复制功能

    经常看到这样一种效果:就是单击一个按钮,就将某个区域内的内容,复制到了剪切板中.其实这个功能实现起来也不难,核心就是用到了window子对象clipboardData的一个方法:setData()语法 ...

  4. js Date() 浏览器兼容问题解决

    一般 直接new Date() 是不会出现兼容性问题的,而 new Date(datetimeformatstring) 常常会出现浏览器兼容性问题,为什么,datetimeformatstring中 ...

  5. js处理浏览器兼容

    1.try  catch 在try中执行我们的代码,如果在执行的过程中发生了异常信息,我们在catch中写代替的执行方案 前提:不兼容四位情况下,执行对应的代码,需要发生异常错误才可以检测到 弊端:不 ...

  6. html5media.js 让浏览器兼容<Video><Audio> 标签

    介绍:https://html5media.info/ 项目:https://github.com/etianen/html5media Wiki:https://github.com/etianen ...

  7. JS中浏览器兼容问题

    body的子节点IE 火狐 显示3个  其他显示7个 float浮动中的兼容 link 操作外联的兼容

  8. JS - 处理浏览器兼容之 event

    function test(e){ var event = e || windows.event   //  IE : windows.event  ,非IE : e }

  9. js浏览器兼容

    //window.event   IE:有window.event对象   FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMo ...

随机推荐

  1. ElasticStack系列之十三 & 联想补全策略

    业务需求 1. 实现搜索引擎前缀搜索功能(中文,拼音前缀查询及简拼前缀查询功能) 2. 实现摘要全文检索功能,及标题加权处理功能(按照标题权值高内容权值相对低的权值分配规则,按照索引的相关性进行排序, ...

  2. java中的悲观锁和乐观锁实现

    悲观锁就是认为并发时一定会有冲突发生,采用互斥的策略.比如java中的synchronized. 而乐观锁是假设并发时不会有冲突发生,如果发生冲突,则操作失败,并不断重试.乐观锁的机制就是CAS(Co ...

  3. 关于ARGB_8888、ALPHA_8、ARGB_4444、RGB_565的理解

    关于ARGB_8888.ALPHA_8.ARGB_4444.RGB_565的理解 A:透明度 R:红色 G:绿 B:蓝 Bitmap.Config ARGB_4444:每个像素占四位,即A=4,R=4 ...

  4. RabbitMQ消息队列里积压很多消息

    1.场景:上千万条消息在mq里积压了几个小时了还没解决 2.解决: 1)先修复consumer的问题,确保其恢复消费速度,然后将现有cnosumer都停掉 2)新建一个topic,partition是 ...

  5. What Does “Neurons that Fire Together Wire Together” Mean?

    What Does “Neurons that Fire Together Wire Together” Mean? I’ve heard the phrase “neurons that fire ...

  6. [转载]如何做到 jQuery-free?

    http://www.ruanyifeng.com/blog/2013/05/jquery-free.html jQuery是现在最流行的JavaScript工具库. 据统计,目前全世界57.3%的网 ...

  7. asp.net中GridView传多个值到其它页面的方法

    网站开发中,在页面之间的跳转,经常会用到传值,其中可能会传递多个值. 一.CommadArgument传多个值到其他页面. 像Gridview dataList repeater等数据绑定控件中,可以 ...

  8. Sparse Filtering简介

    当前很多的特征学习(feature learning)算法需要很多的超参数(hyper-parameter)调节, Sparse Filtering则只需要一个超参数--需要学习的特征的个数, 所以非 ...

  9. 编程语言BrainkFuck

    BrainFuck由Urban Müller在1993年创建,是经常被吐槽的语言,不过我觉得除了名字其它都还挺正常的,没错我觉得这个语言设计的很正常没有Fuck到我的脑子,大概是因为我根本就没有脑子吧 ...

  10. cassandra数据库

    一.下载地址:http://www.apache.org/dyn/closer.lua/cassandra/3.0.11/apache-cassandra-3.0.11-bin.tar.gz 二.安装 ...