JS code:

  1. function getElementPos(elementId)
  2. {
  3. var ua = navigator.userAgent.toLowerCase();
  4. var isOpera = (ua.indexOf('opera') != -1);
  5. var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
  6. var el = document.getElementById(elementId);
  7. if(el.parentNode === null || el.style.display == 'none')
  8. {
  9. return false;
  10. }
  11.  
  12. var parent = null;
  13. var pos = [];
  14. var box;
  15.  
  16. if(el.getBoundingClientRect) //IE
  17. {
  18. box = el.getBoundingClientRect();
  19. var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
  20. var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
  21. return {x:box.left + scrollLeft, y:box.top + scrollTop};
  22. }
  23. else if(document.getBoxObjectFor) // gecko
  24. {
  25. box = document.getBoxObjectFor(el);
  26. var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
  27. var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
  28. pos = ;
  29. }
  30. else // safari & opera
  31. {
  32. pos = [el.offsetLeft, el.offsetTop];
  33. parent = el.offsetParent;
  34.  
  35. if (parent != el)
  36. {
  37. while (parent)
  38. {
  39. pos[0] += parent.offsetLeft;
  40. pos[1] += parent.offsetTop;
  41. parent = parent.offsetParent;
  42. }
  43. }
  44.  
  45. if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' ))
  46. {
  47. pos[0] -= document.body.offsetLeft;
  48. pos[1] -= document.body.offsetTop;
  49. }
  50. }
  51.  
  52. if (el.parentNode)
  53. {
  54. parent = el.parentNode;
  55. }
  56. else
  57. {
  58. parent = null;
  59. }
  60.  
  61. while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML')
  62. {
  63. // account for any scrolled ancestors
  64. pos[0] -= parent.scrollLeft;
  65. pos[1] -= parent.scrollTop;
  66.  
  67. if (parent.parentNode)
  68. {
  69. parent = parent.parentNode;
  70. }
  71. else
  72. {
  73. parent = null;
  74. }
  75. }
  76. return {x:pos[0], y:pos[1]};
  77. }

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. 逻辑回归原理_挑战者飞船事故和乳腺癌案例_Python和R_信用评分卡(AAA推荐)

    sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&a ...

  2. P4514 上帝造题的七分钟

    P4514 上帝造题的七分钟 题意: 二维区间修改 区间查询 --- 错误日志: 写了个 4 重循环忘记调用 \(i\) Solution 二维树状数组 巨尼玛毒瘤 听说二维线段树会 \(MLE\) ...

  3. java.lang.AutoCloseable

    java.lang.AutoCloseable和java.io.Closeable public interface AutoCloseable { void close() throws Excep ...

  4. Java并发编程原理与实战八:产生线程安全性问题原因(javap字节码分析)

    前面我们说到多线程带来的风险,其中一个很重要的就是安全性,因为其重要性因此,放到本章来进行讲解,那么线程安全性问题产生的原因,我们这节将从底层字节码来进行分析. 一.问题引出 先看一段代码 packa ...

  5. angularJS 控制输入的百分数在0%-100%之间

    想了老半天了,记录一下 app.directive("percentageCheck", function () { return { restrict: 'A', require ...

  6. MapReduce (MRV1)设计理念与基本架构

    MapReduce 是一个分布式计算框架,主要由两部分组成:编程模型和运行时环境. 其中,编程模型为用户提供了非常易用的编程接口,用户只需要像编写串行程序一样实现几个简单的函数即可实现一个分布式程序, ...

  7. python核心编程笔记——Chapter8

    Chapter8.条件和循环 这一章感觉有用的点并不多,在我眼里就只有迭代器,列表解析和生成器表达式值得研究而已. 8.2.循环,难度不大. #!usr/bin/env python #-*-codi ...

  8. #error#优化#Model#理解下面这句话错误所导致的错误:"传入一个对象,那么你就拥有了对象的属性"2

    CHENYILONG Blog #error#优化#Model#理解下面这句话错误所导致的错误:"传入一个对象,那么你就拥有了对象的属性"2 © chenyilong. Power ...

  9. webpack详解

    webpack是现代前端开发中最火的模块打包工具,只需要通过简单的配置,便可以完成模块的加载和打包.那它是怎么做到通过对一些插件的配置,便可以轻松实现对代码的构建呢? webpack的配置 const ...

  10. VC++的全局变量(转)

    全局变量一般这样定义:1.在一类的.cpp中定义 int myInt;然后再在要用到的地方的.cpp里extern int myInt:这样就可以用了. 2.在stdafx.cpp中加入:int my ...