JavaScript获取元素在浏览器画布中的绝对位置 兼容IE6

转载 2012年03月29日 10:26:33

JavaScript中提供获取HTML元素位置的属性: 
HTMLElement.offsetLeft 
HTMLElement.offsetHeight 
但 是需要注意的是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。那么如何得到一个HTML元素的绝对位置呢,前一阵找到的一个比较好的函数,分享一下: 
//获取元素的纵坐标 
function getTop(e){ 
var offset=e.offsetTop; 
if(e.offsetParent!=null) offset+=getTop(e.offsetParent); 
return offset; 

//获取元素的横坐标 
function getLeft(e){ 
var offset=e.offsetLeft; 
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); 
return offset; 

其原理就是利用HTMLElement.offsetParent属性,如果当前元素的父元素不是空(null),则在原本的offsetTop基础上加上当前的offsetTop,然后继续获取父元素的父元素的offsetTop,再将其加之,最终递归出该元素相对于整个浏览器画布的纵坐标。横坐标亦然。 

 

来源:http://zhangwenzhuo.iteye.com/blog/174348




Javascript获取页面各种宽度高度(各种浏览器ie6,ie7,firefox下怎么获取更好兼容)

关于获取各种浏览器可见窗口大小的一点点研究,这里面有些在兼容性不是很好,请看后面的介绍。 function getInfo() {     var s = "";     s += " 网...

css javascript等兼容IE6,IE7,IE8,IE9,FIREFOX,Chrome等浏览器详细解决方法

整理了css javascript等兼容IE6,IE7,IE8,IE9,FIREFOX,Chrome等浏览器详细解决方法。 CSS部分 div类 1. 居中问题 div里的内容,IE默...

利用css中的border生成三角,兼容包括IE6的主流浏览器

http://www.36ria.com/demo/triangle/ 1、生成四个不同颜色方向的梯形 代码 #ladder{ width:20px; hei...

HTML5 rgba与opacity的属性 兼容ie6/7/8/9各浏览器

RGBa 与 opacity 效果的区别            .main{ background:#000; width:300px; height:300px; }   .main-1{ ...

关于ie6常见浏览器兼容问题

ie6的退役无疑对前端工程师们来说是巨大的福音,不必再为ie6的兼容问题烧脑费时搬砖了,虽如此,还是整理一下ie6浏览器下的常见兼容性问题 图片间隙描述:在div中插入图片时,图片会将div下方撑大三...

IE6 浏览器常见兼容问题 大汇总(23个)

IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 ...

IE6的常见浏览器兼容问题

1、IE6怪异解析之padding与border算入宽高  原因:未加文档声明造成非盒模型解析  解决方法:加入文档声明  2、IE6在块元素、左右浮动、设定marin时造成margin双倍...

【转载】IE6 浏览器常见兼容问题 大汇总(23个)

IE6以及各个浏览器常见兼容问题 大汇总综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼容...

【分享】兼容ie6-9和现代浏览器以及ios,android,pad等触屏设备的异步文件上传插件

核心代码/** * 该插件用于兼容ie6-7-8-9及现代浏览器的异步上传文件。 * 请注意,在ie6-7-8-9上面的原理是: * 新添加一个表单和一个iframe,然后每次选择都将file输...
  • cdnight
  • cdnight
  • 2016年06月30日 18:25
  • 6210

HTML5 rgba与opacity的属性 兼容ie6/7/8/9各浏览器

在css3之前,在样式中指定的颜色值只能为RGB颜色值,并且只能通过opacity属性来设置元素的透明度。CSS3中增加了3种颜色值-RGBA颜色值,HSL颜色值及HSLA颜色值,并且允许通过对RGB...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript获取元素在浏览器画布中的绝对位置 兼容IE6
举报原因:
原因补充:

(最多只允许输入30个字)