padding, paddingTop, paddingBottom, paddingLeft, paddingRight 속성 예제
|
결과 표시창
마우스를 올려보라. onmouseover, onmouseout 이벤트로 패딩을 변경시킨다.
<STYLE>.test1class {padding:1cm 2cm 3cm 4cm}</STYLE>
<SCRIPT>
function ShowResult(){
str='<TABLE border=1 width=700><TR><TD>';
str+='<TABLE border=1 width=100%>';
str+='<TR><TD>td1Obj.currentStyle.padding='+td1Obj.currentStyle.padding+'</TD></TR>';
str+='<TR><TD>td1Obj.currentStyle.paddingTop='+td1Obj.currentStyle.paddingTop+'</TD></TR>';
str+='<TR><TD>td1Obj.currentStyle.paddingBottom='+td1Obj.currentStyle.paddingBottom+'</TD></TR>';
str+='<TR><TD>td1Obj.currentStyle.paddingLeft='+td1Obj.currentStyle.paddingLeft+'</TD></TR>';
str+='<TR><TD>td1Obj.currentStyle.paddingRight='+td1Obj.currentStyle.paddingRight+'</TD></TR>';
str+='</TABLE></TD>';
str+='<TD><TABLE border=1 width=100%>';
str+='<TR><TD>td2Obj.currentStyle.padding='+td2Obj.currentStyle.padding+'</TD></TR>';
str+='<TR><TD>td2Obj.currentStyle.paddingTop='+td2Obj.currentStyle.paddingTop+'</TD></TR>';
str+='<TR><TD>td2Obj.currentStyle.paddingBottom='+td2Obj.currentStyle.paddingBottom+'</TD></TR>';
str+='<TR><TD>td2Obj.currentStyle.paddingLeft='+td2Obj.currentStyle.paddingLeft+'</TD></TR>';
str+='<TR><TD>td2Obj.currentStyle.paddingRight='+td2Obj.currentStyle.paddingRight+'</TD></TR>';
str+='</TABLE>';
str+='</TD></TR></TABLE>';
showB.innerHTML=str;
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE align=center width=700>
<TR>
<TD>
<TABLE border=1 align=center bgcolor=ffffaa>
<COL style=padding:2cm>
<TR align=middle>
<TD id=td1Obj onmouseover="this.className='test1class';ShowResult();"
onmouseout="this.className='';ShowResult()">
td1Obj <IMG src="../../../gif/rfsample.gif">
</TD>
<TD id=td2Obj onmouseover="this.style.padding='4cm 3cm 2cm 1cm';ShowResult();"
onmouseout="this.style.padding='';ShowResult();">
td2Obj <IMG src="../../../gif/rfsample.gif">
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<DIV id=showB>결과 표시창</DIV>