获取元素在窗口中的绝对XY坐标


有一段时间,为了获取一个可见元素A在窗口中的绝对XY坐标,我是采用以下的方法:

//获取元素A的X坐标
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
//获取元素A的Y坐标
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}

  主流浏览器都支持。

  后来,我知道了,还有这样的一个原生的方法:getBoundingClientRect(),是IE独有的,用来获得页面中某个可见元素A的左,上,右和下分别相对浏览器视窗的位置,但是FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率有很大的提高。

var l=obj.getBoundingClientRect().left
var r=obj.getBoundingClientRect().right
var t=obj.getBoundingClientRect().top
var b=obj.getBoundingClientRect().bottom

  但是在IE浏览器中实现,还是有些这样那样的小问题,看下图:

图中所示是body元素在IE三种模式下offsetLeft,offsetTop的值,getBoundingClientRect().left,getBoundingClientRect().top的值,左上角的XY坐标,原来 IE7标准的body是这么的怪异,但幸好IE8标准和Firfox是一样的。

  getBoundingClientRect()与滚动偏移也有些千丝万缕的关系,参考下背光兄的这篇文章吧!



相关阅读:
理解 SQL Server 中系统表Sysobjects
支持数组的ADDSLASHES的php函数
ASP.NET实现电视节目评比短信息互动平台
如何在Win7等系统虚拟机下安装Windows 8
SQL Server端口更改后的数据库连接方式
Linux Shell 通配符、元字符、转义符使用实例介绍
IE浏览器打印的页眉页脚设置解决方法
ASP实现SQL备份、恢复
php生成随机密码的几种方法
表单的name和id的区别
CSS解决未知高度的垂直水平居中自适应问题
JavaScript入门教程(6) Window窗口对象
几种linux内核文件的区别
CSS字体:详解font属性
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4