js各浏览器兼容取的元素的位置X坐标 Y坐标
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坐标的更多相关文章
- 原生JS 获取浏览器、窗口、元素等尺寸的方法及注意事项
一.通过浏览器获得屏幕的尺寸 screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去 ...
- js中浏览器兼容startsWith 、endsWith 函数
在做js开发的时候用到了startsWith函数时,发现各个浏览器不兼容问题,因为对开发来说,chrome浏览器最好用,就一直在chrome浏览器中使用这两个函数没有任何问题,但在ie浏览器访问就直接 ...
- js实现浏览器兼容复制功能
经常看到这样一种效果:就是单击一个按钮,就将某个区域内的内容,复制到了剪切板中.其实这个功能实现起来也不难,核心就是用到了window子对象clipboardData的一个方法:setData()语法 ...
- js Date() 浏览器兼容问题解决
一般 直接new Date() 是不会出现兼容性问题的,而 new Date(datetimeformatstring) 常常会出现浏览器兼容性问题,为什么,datetimeformatstring中 ...
- js处理浏览器兼容
1.try catch 在try中执行我们的代码,如果在执行的过程中发生了异常信息,我们在catch中写代替的执行方案 前提:不兼容四位情况下,执行对应的代码,需要发生异常错误才可以检测到 弊端:不 ...
- html5media.js 让浏览器兼容<Video><Audio> 标签
介绍:https://html5media.info/ 项目:https://github.com/etianen/html5media Wiki:https://github.com/etianen ...
- JS中浏览器兼容问题
body的子节点IE 火狐 显示3个 其他显示7个 float浮动中的兼容 link 操作外联的兼容
- JS - 处理浏览器兼容之 event
function test(e){ var event = e || windows.event // IE : windows.event ,非IE : e }
- js浏览器兼容
//window.event IE:有window.event对象 FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMo ...
随机推荐
- java8 新特性 Stream
1. Stream初体验 我们先来看看Java里面是怎么定义Stream的: A sequence of elements supporting sequential and parallel agg ...
- eclipse下new server时不可创建的解决方法
在eclipse里新建server时会在工作目录下\.metadata\.plugins\org.eclipse.core.runtime\.settings下自动生成org.eclipse.wst. ...
- PHP常见数组方法和函数
current();当前游标指向的数组单元值 next();下一个数组单元值 end()最后一个 reset()复位 prev()把数组指针往前一位 写法:$arr=array('a','b','c' ...
- LibreOJ#6030. 「雅礼集训 2017 Day1」矩阵
https://loj.ac/problem/6030 如果矩阵第i列有一个黑色, 那可以用他把第i行全都染黑,也可以使任意一列具有黑色 然后就可以用第i行把矩阵染黑 染黑一列的代价最少是1 染黑一行 ...
- CentOS 7快速入门系列教程(一)
基本命令 ls 列举当前目录下的所有文件夹 ls -l 查看文件还是文件夹 d表示文件夹 -表示文件 ls --help man ls 询问命令 man 3 malloc 查看函数 cd 跳转 ...
- [转载]Node入门 » 一本全面的Node.js教程
http://www.nodebeginner.org/index-zh-cn.html 作者: Manuel Kiessling 翻译: goddyzhao & GrayZhang & ...
- 20155310 2016-2017-2 《Java程序设计》第六周学习总结
20155310 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 4.1 Y86指令集体系结构 •有8个程序寄存器:%eax.%ecx.%edx.%ebx.% ...
- java 连接Kafka报错java.nio.channels.ClosedChannelExcep
Java 客户端连接Kafka报如下错误 java.nio.channels.ClosedChannelExcep 是由于Kafka server.properties中的advertised.hos ...
- 【译】第十三篇 Integration Services:SSIS变量
本篇文章是Integration Services系列的第十三篇,详细内容请参考原文. 简介在前一篇我们结合了之前所学的冒泡.日志记录.父子模式创建一个自定义的SSIS包日志记录模式.在这一篇,我们将 ...
- css 实现圆形头像
1.方法一 直接设置img为圆形,这种情况下如果图片不是正方形,图片会被拉伸 <img class="circleImg" src="../img/photo/im ...