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




相关文章推荐

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

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

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

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

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

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

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

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

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

在css3之前,在样式中指定的颜色值只能为RGB颜色值,并且只能通过opacity属性来设置元素的透明度。CSS3中增加了3种颜色值-RGBA颜色值,HSL颜色值及HSLA颜色值,并且允许通过对RGB...

实现背景透明的方法,兼容ie6/7/8等浏览器

今天登录支付宝,发现支付宝首页首页改版了,给人一种清新,自然,简洁的感觉,另外发现支付首页的登录界面用的一种半透明的背景,刚开始以为是用的rgba方法,但是发现在ie6、7、8中登录界面的背景也是同样...

jquery开发中遇到的两个浏览器兼容的问题(ie6、chrome)

方便只看结论的人: ie6下:div绝对定位的位置,在容器已经满了的情况下和其他浏览器不同,其他浏览器会放在下面,而ie6会放到右边。记得要设置left属性。 chrome(webkit)下:do...

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

1.文档类型的声明。 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象; 解决办法:书写文档声明。 2.不同浏览器当中,很多的标签的默认样式不同,如默认...

05 CSS-浏览器兼容问题小总结(IE6)

IE6不支持小于12px的盒子 IE6不支持用overflow:hidden;来清除浮动 IE6双倍margin bug IE6的3px bug

js 给div 添加选区,类似windows桌面选区一样,兼容ie6、7、8、9、10、Firefox、Google、所有浏览器

先来一张效果图: 兼容: IE6 反应有点迟钝,效果没有火狐好。 主要的效果就是,模仿windows桌面的那个选区。可以用选框选区图标。 由于js代码太多,只贴一段核心的代码。 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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