noborderClass border1Class border2Class
border3Class border4Class border5Class

결과 표시창

<STYLE>
.border1Class { border-left:10px groove pink }
.border2Class { border-left:10px dotted pink }
.border3Class { border-left:10px solid pink }
.border4Class { border-left:10px double pink }
.border5Class { border-left:10px inset pink }
.noborderClass { border-left:none }
button {width:110;margin:2}
</STYLE>
<SCRIPT>
function showAll(){
  str='tdObj.className='+tdObj.className+'<BR>';
  str+='tdObj.currentStyle.borderLeftWidth='+tdObj.currentStyle.borderLeftWidth+'<BR>';
  str+='tdObj.currentStyle.borderLeftStyle='+tdObj.currentStyle.borderLeftStyle+'<BR>';
  str+='tdObj.currentStyle.borderLeftColor='+tdObj.currentStyle.borderLeftColor+'<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>