这一节我们将告诉你怎样层次里面套层次 (nesting layers).

叠套层次

元素, 层次, Layer 这三个词是我们在教程经常用的. 它们是一个意 思: 就是一段在 <DIV> 里的 HTML. 而所谓叠套层次就是层次里面 套层次, 或是 netsting layers.

我们把在一个层次里的层次叫子层次, 而把包括子层次的层次叫主 层次. 子层次的位置全是相对于主层次的. 打个比喻, 主层次对子层 次的关系就像窗口对主层次的关系.

我们以后会发觉叠套层次会给我们带来一些方便. 这是因为子层次 的位置是相对于主层次的. 也就是说当我们移动主层次的时候, 子 层次也随着移动.

用 JavaScript 来实现层次套层次在 NetScapt 和 Internet Explorer 是大 不相同. 这就是为什么我们很少看到层次套层次的例子. 这里我们 将要提供一个方法去实现兼容的层次重叠.

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="../picture/bj01_tiantan.jpg" border=0>
	<DIV ID="child1Div"></DIV>
	<DIV ID="child2Div"><center>北京天坛祈年殿</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 性质的初始值. 比如你想知道 parent1 刚开始的位置:

 alert(parent1.left)

在 IE 里你将什么也得不到. 但当你用 JavaScript 改变了这些性质的 值以后, 你就能看到它们的值了. 这个问题显然使得我们无法知道 元素的初始位置, 也就是说无法去准确的控制它了. 但 Microsoft 添 加了一些非标准 CSS 性质在 IE4 里可以使得我们能解决这个麻烦.

• pixelLeft
• pixelTop
• pixelWidth
• pixelHeight

在 IE4 里, 这几个新的性质不会受到 STYLE tag 的影响. 所以我们可 把程序做如下的修改使得我们能记住初始位置.

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

这样你就可以像以前那样很方便的改变 layer 的位置了.

点这里 看移动主层次和子层次的范例.

可视性质和叠套:

如果你忘记了给出子层次的可视性质, 它将会使用主层次的可视性质.

点这里 看可视性质和叠套层次的关系.

　　《DHTML Builder》 Jie/文