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. timeshift 安装使用说明

    https://blog.csdn.net/hunter___/article/details/79751379 这里介绍一个可视化的备份软件:Timeshift,它不只能备份你的个人文件夹或应用程序 ...

  2. VS2010 中更改项目名称

    Time.vcxproj修改项目名称,主要是通过以下几个步骤就能完成: 修改解决方案的名称. 修改解决项目名称. 修改项目的程序集名称和默认命名空间 替换整个项目或解决方案中的出现该名称的地方. 修改 ...

  3. codevs 1070 普通递归关系

    1070 普通递归关系  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master     题目描述 Description 考虑以下定义在非负整数n上的递归关系 f( ...

  4. C#委托Code

    class Program { delegate double ProcessDelegate(double param1, double param2); static double Multipl ...

  5. 京东全链路压测军演系统(ForceBot)架构解密

    摘要:全链路压测是应对电商大促容量规划最有效的手段,如何有效进行容量规划是其中的架构关键问题.京东在全链路压测方面做过多年尝试,本文转载京东商城基础平台技术专家文章,介绍其最新的自动化压测 Force ...

  6. a标签伪元素选择器

    a{ color: black; } /*未访问的链接*/ a:link{ color: red; } /*访问过的链接*/ a:visited{ color: green; } /*鼠标经过时*/ ...

  7. react-music React全家桶项目,精品之作!

    React-Music 全家桶项目,精品之作! 一.简介 该项目是基于React全家桶开发的一个音乐播放器,技术栈采用:Webpack + React + React-redux + React-ro ...

  8. @Controller,@Service,@Repository,@Component详解

    @Controller 用来表示一个web控制层bean,如SpringMvc中的控制器. @Service 用来表示一个业务层bean. @Repository 用来表示一个持久层bean,即数据访 ...

  9. [转载]Visual Studio支持Node.js

    http://news.cnblogs.com/n/193893/ https://nodejstools.codeplex.com/ 微软发布了一个官方插件“Node.js Tools for Vi ...

  10. 写一个shell脚本利用wget抓取股票历史数据

    今天,大数据部老大交给我一项任务——抓取股票历史数据.于是乎,我自行在网上找了一下,发现wget真真是一个非常强大的linux下载工具.我已经被深深震撼到了.下面叙述今天的一些过程,还是比较坎坷的. ...