栏目导航
热点推荐
- 使用JS进行目录上传(相当于批量
- 推荐学习:精通JS正则表达式
- js创建对象的几种常用方式小结(
- jQuery技巧总结
- 10个JavaScript小技巧
- 非常全面的实用JavaScript开发工
- 网站统计之javascript代码加载优
- JS实现广告顺序轮播和随机轮播四
- 使用javascript让页面自适应
- 24小时退弹一次的代码,可弹SP2S
- (Tips&Tricks;)用客户端模板精简J
- js教程:JavaScript作用域(Scope)
阅览排行
JS获取元素相对于文档的坐标
www.jz123.cn 2010-09-27 来源: 中国建站 责任编辑(袁袁) 我要投递新闻
获取元素相对于文档的坐标最简单的方法是用Event对像的offseX/offsetY或layerX/layerY 属性。在实现了offsetX/offxetY这两个属性的浏览器中。获取的坐标都算正常的。可是实现了layerX/layerY 属性 的浏览器中获取的坐标会有一些问题。
在 ie,chrome,opera,firefox,safari 这些主流的浏览器中只有 firefox没实现offsetX/offsetY这两个属性,而取代(不知道能不能说算是取代)它们的是layerX/layerY
文档上说这两个属性返回相对于触发事件的对象,鼠标位置的x/y坐标 可是经过测试后,结果并不是那么一回事。
后来才知。在FireFox中Event对像的layerX/layerY 这两个属性只有在当前触发事件对像的CSS 属性 position 值不为static时。才能获取到正确的值。
下面代码是在网上找到一个兼容各浏览器获取元素位置的方法
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 = 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 = [box.x - borderLeft, box.y - borderTop]; } 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]}; } |
0
上一篇:常用JavaScript代码13 下一篇:js中的小数计算学问大-》注意误差