第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
}
}
服务器租用、托管;域名注册;虚拟主机
江湖、聊天室租用;程序开发,网站建设
欢迎咨询http://nicchina.com/
QQ:30196310