 |
결과 표시창
<STYLE>
.border1Class { border:red;border-style:solid;border-width:10 }
.border2Class { border:red;border-style:solid dotted;border-width:10 20 }
.border3Class { border:red;border-style:solid dotted dashed ;border-width:10 20 30 }
.border4Class { border:red;border-style:solid dotted dashed inset ;border-width:10 20 30 40 }
.border5Class { border:thick dashed pink }
.noborderClass { border:none;border-width:red }
button {width:110;margin:2}
</STYLE>
<SCRIPT>
function showAll(){
str='tdObj.className='+tdObj.className+'<BR>';
str+='tdObj.currentStyle.borderWidth='+tdObj.currentStyle.borderWidth+'<BR>';
str+='tdObj.currentStyle.borderStyle='+tdObj.currentStyle.borderStyle+'<BR>';
str+='tdObj.currentStyle.borderColor='+tdObj.currentStyle.borderColor+'<BR>';
showA.innerHTML=str;
}
</SCRIPT>
<TABLE border cellspacing=5 width=100%>
<TR>
<TD id="tdObj"><IMG src="../../gif/flower.jpg" width="300"></TD>
</TR>
</TABLE>
<BUTTON onclick="tdObj.className='border1Class';showAll()">border1Class</BUTTON>
<BUTTON onclick="tdObj.className='border2Class';showAll()">border2Class</BUTTON>
<BUTTON onclick="tdObj.className='border3Class';showAll()">border3Class</BUTTON><BR>
<BUTTON onclick="tdObj.className='border4Class';showAll()">border4Class</BUTTON>
<BUTTON onclick="tdObj.className='border5Class';showAll()">border5Class</BUTTON>
<BUTTON onclick="tdObj.className='noborderClass';showAll()">noborderClass</BUTTON>
<DIV id=showA>결과 표시창</DIV>