개체의 위쪽 테두리(border) 색상값을 반환하거나 설정한다.

인수
cssSelector : (스타일 선택자)
속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)
스타일 속성은 개체의 위쪽 테두리(border) 속성들을 복합 축약 속성으로 나타내는 문자열이다.

이 값은 색상표의 색상명이나 RGB 색상값 중의 하나이다.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 없다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

IE5.5에서 이 속성은 인라인 엘레멘트에 적용된다. 이전 버전에서는 인라인 엘레멘트는 position 속성값이 absolute이거나 이 속성을 이용하여 배치되어야 한다. heightwidth 속성의 설정된 값에 의하여 엘레멘트의 배치가 결정된다.

일부 브라우저에서 색상이름을 인식하지 못할 수 있지만, 모든 브라우저는 RGB 색상은 인식하고 올바르게 디스플레이하여야 한다.

적용
개체scriptCSS IE 버전
참조
border borderTop borderTopColor borderTopStyle borderTopWidth

이 속성은 CSS2(Cascading Style Sheets Level 2)에 정의되었다.



결과 표시창
<STYLE>
.border1Class { border-top:10px groove pink }
.border2Class { border-top:10px dotted pink }
.border3Class { border-top:10px solid pink }
.border4Class { border-top:10px double pink }
.border5Class { border-top:10px inset pink }
.noborderClass { border-top:none }
button {width:110;margin:2}
</STYLE>
<SCRIPT>
function showAll(){
  str='tdObj.className='+tdObj.className+'<BR>';
  str+='tdObj.currentStyle.borderTopWidth='+tdObj.currentStyle.borderTopWidth+'<BR>';
  str+='tdObj.currentStyle.borderTopStyle='+tdObj.currentStyle.borderTopStyle+'<BR>';
  str+='tdObj.currentStyle.borderTopColor='+tdObj.currentStyle.borderTopColor+'<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>