결과 표시창

<SCRIPT>
function clearAll(){
  taObj.style.scrollbarBaseColor=taObj.style.scrollbarFaceColor=taObj.style.scrollbarArrowColor
    =taObj.style.scrollbarTrackColor=taObj.style.scrollbarHighlightColor=taObj.style.scrollbarShadowColor
    =taObj.style.scrollbarDarkShadowColor=taObj.style.scrollbar3dLightColor='white';
  bodyObj.style.scrollbarBaseColor=bodyObj.style.scrollbarFaceColor=bodyObj.style.scrollbarArrowColor
    =bodyObj.style.scrollbarTrackColor=bodyObj.style.scrollbarHighlightColor=bodyObj.style.scrollbarShadowColor
    =bodyObj.style.scrollbarDarkShadowColor=bodyObj.style.scrollbar3dLightColor='white';
  showAll();
}

function showAll(){
  str='';
  sel=selObj.options.selectedIndex;
  vcolor=selColor.options(selColor.options.selectedIndex).innerText;
  str+='<FONT color=teal>'+selObj.options(selObj.options.selectedIndex).innerText+'</FONT>';
  str+='=<FONT color=blue>'+vcolor+'</FONT><BR>';
  if (sel==0)  bodyObj.style.scrollbarBaseColor=taObj.style.scrollbarBaseColor=vcolor;
  if (sel==1)  bodyObj.style.scrollbarFaceColor=taObj.style.scrollbarFaceColor=vcolor;
  if (sel==2)  bodyObj.style.scrollbarArrowColor=taObj.style.scrollbarArrowColor=vcolor;
  if (sel==3)  bodyObj.style.scrollbarTrackColor=taObj.style.scrollbarTrackColor=vcolor;
  if (sel==4)  bodyObj.style.scrollbarHighlightColor=taObj.style.scrollbarHighlightColor=vcolor;
  if (sel==5)  bodyObj.style.scrollbarShadowColor=taObj.style.scrollbarShadowColor=vcolor;
  if (sel==6)  bodyObj.style.scrollbarDarkShadowColor=taObj.style.scrollbarDarkShadowColor=vcolor;
  if (sel==7)  bodyObj.style.scrollbar3dLightColor=taObj.style.scrollbar3dLightColor=vcolor;
  str+='taObj.style.scrollbarBaseColor='+taObj.currentStyle.scrollbarBaseColor+'<BR>';
  str+='taObj.style.scrollbarFaceColor='+taObj.currentStyle.scrollbarFaceColor+'<BR>';
  str+='taObj.style.scrollbarArrowColor='+taObj.currentStyle.scrollbarArrowColor+'<BR>';
  str+='taObj.style.scrollbarTrackColor='+taObj.currentStyle.scrollbarTrackColor+'<BR>';
  str+='taObj.style.scrollbarHighlightColor='+taObj.currentStyle.scrollbarHighlightColor+'<BR>';
  str+='taObj.style.scrollbarShadowColor='+taObj.currentStyle.scrollbarShadowColor+'<BR>';
  str+='taObj.style.scrollbarDarkShadowColor='+taObj.currentStyle.scrollbarDarkShadowColor+'<BR>';
  str+='taObj.style.scrollbar3dLightColor='+taObj.currentStyle.scrollbar3dLightColor+'<BR>';

  showA.innerHTML=str;
}
</SCRIPT>
<STYLE>
.scrollbar {
 scrollbar-base-color:#ffc;
 scrollbar-face-color:cfa;
 scrollbar-arrow-color:red;
 scrollbar-track-color:yellow;
 scrollbar-highlight-color:aqua;
 scrollbar-shadow-color:brown;
 scrollbar-darkshadow-color:black;
 scrollbar-3dlight-color:navy;
}
</STYLE>
</HEAD>

<BODY class="scrollbar" id="bodyObj">

<DIV class=example>
<DIV class=show>
<TABLE cellpadding=5 cellspacing=0 border=1>
<TD id="container" style="width"100;overflow:scroll">
<TEXTAREA class="scrollbar" id="taObj" cols="10" rows="8">
스크롤바의 엘레멘트의 색상을 나타내는 문자열이다.
스크롤바의 엘레멘트의 색상을 나타내는 문자열이다.
스크롤바의 엘레멘트의 색상을 나타내는 문자열이다.
</TEXTAREA>
</TD>
<TD>

<SELECT id="selObj" size="8">
<OPTION selected>scrollbarBaseColor
<OPTION>scrollbarFaceColor
<OPTION>scrollbarArrowColor
<OPTION>scrollbarTrackColor
<OPTION>scrollbarHighlightColor
<OPTION>scrollbarShadowColor
<OPTION>scrollbarDarkShadowColor
<OPTION>scrollbar3dLightColor
</SELECT>
</TD>
<TD>
<SELECT id="selColor" size="8">
<OPTION>white
<OPTION>#ffa
<OPTION>yellow
<OPTION>beige
<OPTION>aqua
<OPTION>teal
<OPTION>pink
<OPTION>lightgreen
<OPTION>green
<OPTION>blue
<OPTION selected>red
<OPTION>navy
<OPTION>black
</TD>
<TD>
<BUTTON onclick="showAll()" style="width:60">보기</BUTTON><BR>
<BUTTON onclick="clearAll()" style="width:60">지우기</BUTTON>
</TD>
</TR>
<TR>
<TD colspan=4 height=200 id="showA">결과 표시창</TD></TR>
</TABLE>
</DIV>