浅谈IE浏览器中元素的offsetParent属性


offsetParent属性,在MSDN中说明很简单,后来查了其它资料(CSSOM View Module,MDC,YDC),总算有些了解,但是IE有那么几种模式,offsetParent.tagName返回的到底是什么,比较复杂。经过测试,以某元素A为例,如果A是body元素,返回的是null。得到结果如下图所示:

  说明:diplay为空表示元素显示不是"none";position这列中的self,father,grandfather,root是指元素A自身,A的父元素,一直到A的根元素。offsetParent和position是否定位,display是否为none也有关系的。

  横看,大概能得出这么4个结论:

  1、当元素A及它的整个祖先元素中,position都是默认值(static),不管diplay是否为none,IE8标准下,元素A的offsetParent取值是body元素,IE7标准和Quirks下返回的是元素A的根元素;

  2、当元素A的祖先元素级别中某祖先元素的position不是默认值(static),diplay不为none,IE8标准,IE7标准和Quirks,元素A的offsetParent取值是已定位的祖先元素;

  3、当元素A的祖先元素级别中某祖先元素的position不是默认值(static),diplay为none,IE8标准下,元素A的offsetParent取值是body元素,IE7标准和Quirks下返回的值仍是已定位的祖先元素;

  4、当元素A自身的position不是默认值(static),不管diplay是否为none,IE8标准和Quirks下,元素A的offsetParent取值是body元素,IE7标准返回的值是html元素。

  纵看,IE8标准几乎接近DOM标准,和Firefox返回的结果是一样的。

  我的测试代码:

  其中的js代码和css代码如下:

//JS
function  getOffset(obj){
 var a = document.getElementById(obj);
  alert("ol="+a.offsetLeft+" "+"ot="+a.offsetTop+" "+a.offsetParent.getAttribute("name"));
}
function showdiv(obj){var a = document.getElementById(obj);a.style.display="";}
function hidediv(obj){var a = document.getElementById(obj);a.style.display="none";}
function handle(flg){
if(flg==1){showdiv("div1");hidediv("div2");hidediv("div3");}
if(flg==2){showdiv("div2");hidediv("div1");hidediv("div3");}
if(flg==3){showdiv("div3");hidediv("div2");hidediv("div1");}
}
//CSS
  #bigdiv{width:300px;height:90px;background-color:#f1f1f1;}
  ul,p{margin:0;}
  ul>li{display:inline; padding-left:3px;cursor:pointer;margin:0;}
  img{padding-left:45px;border:0; }
  #div1,#div2,#div3{background-color:#c1c1c1;}


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3