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. go语言从零学起(一) -- 文档教程篇

    先记录一下自己学go语言的出发点 作为一个phper,精通一门底层语言一直是努力的目标. 相对于c,c++,go语言不需要过多的关注指针,内存释放,一两行代码就能跑起一个server服务,简直不要太简 ...

  2. SMO详解

    转自:简书https://www.jianshu.com/p/55458caf0814 SVM通常用对偶问题来求解,这样的好处有两个:1.变量只有N个(N为训练集中的样本个数),原始问题中的变量数量与 ...

  3. LazyMay:实现同步和异步任务的顺序执行

    在掘金看到的文章,流程控制同步和异步任务的顺序执行,收益匪浅,工作中能用到. 1.实现以下效果 实现一个LazyMan,可以按照以下方式调用: LazyMan(“Hank”)输出: Hi! This ...

  4. git 提交模板配置

    1.创建模板文件,比如gitTemplate.txt,内容如下: ABSTRACT:修改自测发现的多度数据同步相关问题. Bug Fix [Y/N]:NBug ID:New Feature [Y/N] ...

  5. Git之初始化及提交操作

    Git 的配置文件有三个: Git 把管理的文件分为了两个区域四个状态: 工作区: 当前开发程序所在目录称为工作区,该区域的文件会有状态的变化且状态由 git自动检测,程序中文件做任何操作(增.删.改 ...

  6. sql 2012之后分页查询速度问题

    一.SQL Server 2012使用OFFSET/FETCH NEXT分页,比SQL Server 2005/2008中的RowNumber()有显著改进.今天特地作了简单测试,现将过程分享如下: ...

  7. Ubuntu 15.04 双击运行 *.sh、*.py文件

    源 起 之前一直在Windows下用AndoridStudio,今天试了一下在Linux系统Ubuntu 15.04中配置Android Studio: 过程和Windws下差不多,但是最后没有生成桌 ...

  8. python核心编程笔记——Chapter2

    对于.py文件,任何一个空的式子都不会有什么输出,如下: #!/usr/bin/env python #-*-coding=utf-8-*- #无任何效果,空语句 1 + 2 * 4 对于i++,++ ...

  9. <!DOCTYPE>是干嘛用的?— html文档类型

    一.啥是文档类型? 在网站开发中一定遇到过这样几种html文档 <!DOCTYPE> 是啥? Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也 ...

  10. HDU 4690 EBCDIC 2013 Multi-University Training Contest 9

    解题报告:一个模拟题,有两张表格,然后输入一个字符在第一章表格中的位置,让你找出这个字符在第二章表对应的位置. 我欧诺个的是暴力打表,输了两百多个数字,时间复杂度直接降到O(1),这题觉得比较坑的就是 ...