可是在IE中,obj.offsetLeft是相对于其父级元素的定位
<
html
>
< head >
< title > Dom:offsetParent使用 </ title >
</ head >
< body >
< h2 > 该网页中有4个div 他们的id值分别是a,a_1,b,b_1 < br />
a包含了a_1.b包含了b_1 < br />
a和b是相互独立的..下面我们分别对a_1和b_1两个子元素使用offsetParent方法.
你用IE浏览器测试,你会发现a1的运函数弹出body,而b1的运行函数返回了div,同样的两个子元素.同样的使用方法.为什么返回的结果不一样呢?
原因就是我为b1的父元素b,增加了一个宽度属性以后.他就把offsetParent看做是元素的父元素.如果不为b元素指定任何属性样式,他则返回body
而在火狐和谷歌浏览器中两次都会弹出body,不会受此影响.
< div id ="a" >
< div id ="a_1" ></ div >
</ div >
< div id ="b" style ="width:200px;" >
< div id ="b_1" ></ div >
</ div >
< script type ="text/javascript" >
function a1_offsetParent(){ // 测试b元素的offsetParent
var a_1 = document.getElementById( " a_1 " );
alert(a_1.offsetParent.tagName);
}
a1_offsetParent(); // 运行a1测试函数
function b1_offsetParent(){
var b_1 = document.getElementById( " b_1 " );
alert(b_1.offsetParent.tagName);
}
b1_offsetParent(); // 运行b1测试函数
</ script >
</ body >
</ html >
< head >
< title > Dom:offsetParent使用 </ title >
</ head >
< body >
< h2 > 该网页中有4个div 他们的id值分别是a,a_1,b,b_1 < br />
a包含了a_1.b包含了b_1 < br />
a和b是相互独立的..下面我们分别对a_1和b_1两个子元素使用offsetParent方法.
你用IE浏览器测试,你会发现a1的运函数弹出body,而b1的运行函数返回了div,同样的两个子元素.同样的使用方法.为什么返回的结果不一样呢?
原因就是我为b1的父元素b,增加了一个宽度属性以后.他就把offsetParent看做是元素的父元素.如果不为b元素指定任何属性样式,他则返回body
而在火狐和谷歌浏览器中两次都会弹出body,不会受此影响.
< div id ="a" >
< div id ="a_1" ></ div >
</ div >
< div id ="b" style ="width:200px;" >
< div id ="b_1" ></ div >
</ div >
< script type ="text/javascript" >
function a1_offsetParent(){ // 测试b元素的offsetParent
var a_1 = document.getElementById( " a_1 " );
alert(a_1.offsetParent.tagName);
}
a1_offsetParent(); // 运行a1测试函数
function b1_offsetParent(){
var b_1 = document.getElementById( " b_1 " );
alert(b_1.offsetParent.tagName);
}
b1_offsetParent(); // 运行b1测试函数
</ script >
</ body >
</ html >