KoXo 자바스크립트 - 스타일(style) 예제

<HTML>
<HEAD>
<TITLE>KoXo 자바스크립트 - 스타일(style) 예제 - DIV 효과 예제</TITLE>
<STYLE>
button {width:120}
.show{text-align:center;color:blue}
</STYLE>
<SCRIPT>
function showAll(){
 show1.innerText=div1.style.zIndex;
 show2.innerText=div2.style.zIndex;
 show3.innerText=div3.style.zIndex;
 show4.innerText=div4.style.zIndex;
 show5.innerText=div5.style.zIndex;
}
</SCRIPT>
</HEAD>

<BODY onload="showAll()">
<H4 style=position:absolute;top:50;left:400;color:blue>z-index 예제</H4>
<DIV>
<DIV id="div1" style="position:absolute; width:200px; height:200px; left:100px; top:100px;
   z-index:1; background-color:yellow">DIV 1</DIV>

<DIV id="div2" style="position:absolute; width:200px; height:200px; left:50px; top:50px;
   z-index:2; background-color: #99CC00; border: 1px solid #000000;">DIV 2</DIV>

<DIV id="div3" style="position:absolute; width:200px; height:200px; left:150px; top:150px;
   z-index:3; background-color: red; border: 1px dotted red;">DIV 3</DIV>

<DIV id="div4" style="position:absolute; width:50px; height:400px; left:175px; top:10px;
   z-index:4; background-color: blue; border: 1px dotted red;">DIV 4</DIV>

<DIV id="div5" style="position:absolute; width:400px; height:50px; left:10px; top:175px;
   z-index:5; background-color: green; border: 1px dotted red;">DIV 5</DIV>
</DIV>
<P style="position:absolute;top:450;left:100;border:solid 1 blue">
<TABLE>
<COL style="font-weight:bold;color:green">
<TD>zIndex=</TD>
<TD class=show id=show1></TD>
<TD class=show id=show2></TD>
<TD class=show id=show3></TD>
<TD class=show id=show4></TD>
<TD class=show id=show5></TD>
</TR>
<TR>
<TD>zIndex++</TD>
<TD><BUTTON onclick="div1.style.zIndex++;show1.innerText=div1.style.zIndex">DIV 1 위로</BUTTON></TD>
<TD><BUTTON onclick="div2.style.zIndex++;show2.innerText=div2.style.zIndex">DIV 2 위로</BUTTON></TD>
<TD><BUTTON onclick="div3.style.zIndex++;show3.innerText=div3.style.zIndex">DIV 3 위로</BUTTON></TD>
<TD><BUTTON onclick="div4.style.zIndex++;show4.innerText=div4.style.zIndex">DIV 4 위로</BUTTON></TD>
<TD><BUTTON onclick="div5.style.zIndex++;show5.innerText=div5.style.zIndex">DIV 5 위로</BUTTON></TD>
</TR>
<TR>
<TD>zIndex--</TD>
<TD><BUTTON onclick="if(div1.style.zIndex>-1) div1.style.zIndex--;show1.innerText=div1.style.zIndex">DIV 1 아래로</BUTTON></TD>
<TD><BUTTON onclick="if(div2.style.zIndex>-1) div2.style.zIndex--;show2.innerText=div2.style.zIndex">DIV 2 아래로</BUTTON></TD>
<TD><BUTTON onclick="if(div3.style.zIndex>-1) div3.style.zIndex--;show3.innerText=div3.style.zIndex">DIV 3 아래로</BUTTON></TD>
<TD><BUTTON onclick="if(div4.style.zIndex>-1) div4.style.zIndex--;show4.innerText=div4.style.zIndex">DIV 4 아래로</BUTTON></TD>
<TD><BUTTON onclick="if(div5.style.zIndex>-1) div5.style.zIndex--;show5.innerText=div5.style.zIndex">DIV 5 아래로</BUTTON></TD>
</TR>
</TABLE>
zIndex=
zIndex++
zIndex--