第7节. 叠套层次 
　　叠套层次其实就是把子层次 DIV 写在主层次 DIV 的里面. 

<DIV ID="parent1Div">
 <DIV ID="child1Div"></DIV>
 <DIV ID="child2Div"></DIV>
 
</DIV>

　　对于叠套层次, 在 DIV 里面定义 STYLE 是无法工作的, 所以我们只能用 <STYLE> 来定义叠套层次的性质.

<STYLE TYPE="text/css">
<!--
#parent1Div {position:absolute; left:100; top:80; width:500; height:347; 
 clip:rect(0,500,347,0); 
 background-color:#ffcf80; layer-background-color:#C0C0C0;background-image:URL(filename.gif); 
 layer-background-image:URL(filename.gif); repeat:no;}
#child1Div {position:absolute; left:0; top:200; width:70; height:70; 
 clip:rect(0,70,70,0); 
 background-color:#FF0000; layer-background-color:#FF0000;}
#child2Div {position:absolute; left:100; top:280; width:300; height:60; 
 clip:rect(0,300,60,0); 
 background-color:#CCFFCC; layer-background-color:#CCFFCC;}
-->
</STYLE>

<DIV ID="parent1Div">
 <IMG src="child.gif" border=0>
 <DIV ID="child1Div" align=right>OH!</DIV>
 <DIV ID="child2Div"><center>How lovely</center></DIV>
</DIV>

　　JavaScript 和叠套 

　　JavaScrip 在 Netscape 和 Internet Explore 里操纵叠套是大不一样的. 在 IE 里处理叠套层次和处理一般层次没有什么区别.

  childLayer.style.properyName

　　但是对 Netscape 来说, 如果你想操纵子层次你必须参照它的主层次.

　　document.parentLayer.document.childLayer.propertyName

　　这里的在 layer 名字之前的 document 是因为 Netscape 把 layer 看做document. 另外你所要知道的是叠套的层次是没有限制的, 也就是说你可以叠套无数层. 比如我们把上面的例子里的第二个子层次放到第一个子层次里.

<DIV ID="parent1Div">
  <DIV ID="child1Div">
 <DIV ID="child2Div"></DIV>
  </DIV>
</DIV>

　　
在这个情况下, 想要操纵 child2Div, 你得

  document.parent1Div.document.child1Div.document.child2Div.propertyName

　　
我们现在可以来为这些层次定义指针变量

function init() {
  if (ns4) {
 parent1 = document.parent1Div
 child1 = document.parent1Div.document.child1Div
 child2 = document.parent1Div.document.child2Div
  }
  if (ie4) {
 parent1 = parent1Div.style
 child1 = child1Div.style
 child2 = child2Div.style
  }
}

IE 的处理: 
　　当你用 STYLE tag 来定义你的 Layer 的时候, IE 读不出来Layer 性质的初始值, 但 Microsoft 添加了一些非标准 CSS 性质:(这几个新的性质不会受到 STYLE tag 的影响.)

<UL>
<LI>pixelLeft
<LI>pixelTop
<LI>pixelWidth
<LI>pixelHeight
</UL>

　　
我们把程序做如下的修改:

function init() {
  if (ns4) {
 parent1 = document.parent1Div
 parent1.xpos = parent1.left
 parent1.ypos = parent1.top
 child1 = document.parent1Div.document.child1Div
 child1.xpos = child1.left
 child1.ypos = child1.top
 child2 = document.parent1Div.document.child2Div
 child2.xpos = child2.left
 child2.ypos = child2.top
  }
  if (ie4) {
 parent1 = parent1Div.style
 parent1.xpos = parent1.pixelLeft
 parent1.ypos = parent1.pixelTop
 child1 = child1Div.style
 child1.xpos = child1.pixelLeft
 child1.ypos = child1.pixelTop
 child2 = child2Div.style
 child2.xpos = child2.pixelLeft
 child2.ypos = child2.pixelTop
  }
}

欢迎咨询/