作者：ahao

Stylesheets 和叠套

叠套层次其实就是把子层次 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:#C0C0C0; layer-background-color:#C0C0C0;}
#child1Div {position:absolute; left:-20; 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="image.jpg" border=0>
    <DIV ID="child1Div"></DIV>
    <DIV ID="child2Div"><center>dhtml test</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 的影响.)

• pixelLeft
• pixelTop
• pixelWidth
• pixelHeight

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

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
  }
}