dhtml

운영자

| 기사입력 2006/09/11 [07:59]

dhtml

운영자

ㅣ 기사입력

2006/09/11 [07:59]

<html>
<head>
    <script type="text/javascript">
        function hidemenu() {
            document.getElementById("aaa").style.display = "none";
            document.getElementById("bbb").style.display = "none";
        }
        function myf(div) {
            document.getElementById("aaa").style.display = "none";
            document.getElementById("bbb").style.display = "none";
            document.getElementById(div).style.display = "block";
        }
    </script>
</head>
<body onload="javascript:hidemenu()">
    [<a href="javascript:myf('aaa')">A</a>][<a href="javascript:myf('bbb')">B</a>]
    <div id = "aaa">
    [submenu_1 of A] [submenu_2 of A] [submenu_3 of A]
    </div>
    <div id = "bbb">
    [submenu_1 of B] [submenu_2 of B] [submenu_3 of B]
    </div>
</body>
</html>
========================================================
<STYLE>
.pitem { position: static }
</STYLE>
<SCRIPT>
function fnAbsolute(){
   oSpan.style.position="absolute";
}
function fnRelative(){
   oSpan.style.position="relative";
}
function fnStatic(){
   oSpan.style.position="static";
}
</SCRIPT>
<P>
<SPAN ID=oSpan CLASS="pitem">
This is a SPAN in a paragraph of text.
</SPAN>
This is a paragraph of text.</P>
<INPUT onclick="fnRelative()" TYPE=button VALUE="Relative">
<INPUT onclick="fnAbsolute()" TYPE=button VALUE="Absolute">
<INPUT onclick="fnStatic()" TYPE=button VALUE="Static">

getElementById
<SCRIPT>
function fnGetId(){
   // Returns the first DIV element in the collection.
   var oVDiv=document.getElementById("oDiv1");
    alert(document.getElementById("oDiv1").scrollLeft);
   alert(document.getElementById("oDiv1").scrollTop);
    alert(oDiv1.style.posTop);
alert(oDiv1.style.posLeft);
oDiv1.style.posTop=300;
     oDiv1.style.posLeft=400;
}
function Show(a) {

}
</SCRIPT>

<TABLE>
<TR>
<TD>  ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</TD>
<TD><DIV ID="oDiv1" onMouseOver="Show(oDiv1)" STYLE="position:relative;top:-10;left:-10;width:10px;height:15px;
z-order:1" ><b><font color=red>FDSAFDSDiv #1</b></DIV>
<DIV ID="oDiv2" onMouseOver="Show(oDiv2)">Div #2</DIV>
<DIV ID="oDiv3" onMouseOver="Show(oDiv3)">Div #3</DIV></TD>
</TR>
</TABLE>

<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetId()">

getElementsByName
<SCRIPT>
function fnGetNames(){
   // Returns a collection with 2 INPUT type=text elements.
   var aInput=document.getElementsByName("firstName");

}
</SCRIPT>
<INPUT TYPE="text" NAME="firstName">
<INPUT TYPE="text" NAME="firstName">
<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetNames()">
<BR><BR>
   <DIV ID=oDiv STYLE="position:absolute; width:200px;height:100px;" onclick=alert(this.scrollTop)>
               aaaa</DIV>
===========================================================

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<BODY>
<table border=1><tr><td>TD</td></tr></table>
<input type=button value="버튼"><br>
<div>Div</div><p>
* 마우스로 해당 객체를 mouseover 해 보세요.
<P>
srcElement: <B ID="SRCEL"></B><BR>
srcElement.tagName: <B ID="SRCET"></B><BR>
srcElement.parentElement: <B ID="PAREL"></B><BR>
srcElement.parentElement.tagName: <B ID="PARET"></B><BR>
srcElement.offsetLeft: <B ID="OFLEL"></B><BR>
srcElement.offsetTop: <B ID="OFTEL"></B><BR>
srcElement.style.pixelLeft: <B ID="PXLEL"></B><BR>
srcElement.style.pixelTop: <B ID="PXTEL"></B><BR>
clientX: <B ID="CLXEL"></B><BR>
clientY: <B ID="CLYEL"></B><BR>
document.body.scrollLeft: <B ID="SCLEL"></B><BR>
document.body.scrollTop: <B ID="SCTEL"></B><BR>

트위터

페이스북

카카오톡