 |
결과 표시창
<STYLE>
.border1Class { border-bottom:10px groove pink }
.border2Class { border-bottom-width:20px;border-bottom-style:outset}
.border3Class { border-bottom-width:20;border-bottom-style:solid;border-bottom-color:red }
.border4Class { border-bottom:10px double pink }
.border5Class { border-width:5 10 15 20;border-style:solid dotted;border-color:pink }
.noborderClass { border-bottom:none }
button {width:110;margin:2}
</STYLE>
<SCRIPT>
function showAll(){
str='tdObj.className='+tdObj.className+'<BR>';
str+='tdObj.currentStyle.borderBottomWidth='+tdObj.currentStyle.borderBottomWidth+'<BR>';
str+='tdObj.currentStyle.borderBottomStyle='+tdObj.currentStyle.borderBottomStyle+'<BR>';
str+='tdObj.currentStyle.borderBottomColor='+tdObj.currentStyle.borderBottomColor+'<BR>';
showA.innerHTML=str;
}
</SCRIPT>
<TABLE border cellspacing=5>
<TR>
<TD id="tdObj"><IMG src="../../gif/flower.jpg" width="330"></TD>
</TR>
</TABLE>
<BUTTON onclick="tdObj.className='noborderClass';showAll()">noborderClass</BUTTON>
<BUTTON onclick="tdObj.className='border1Class';showAll()">border1Class</BUTTON>
<BUTTON onclick="tdObj.className='border2Class';showAll()">border2Class</BUTTON><BR>
<BUTTON onclick="tdObj.className='border3Class';showAll()">border3Class</BUTTON>
<BUTTON onclick="tdObj.className='border4Class';showAll()">border4Class</BUTTON>
<BUTTON onclick="tdObj.className='border5Class';showAll()">border5Class</BUTTON>
<DIV id=showA>결과 표시창</DIV>