개체의 오른쪽 테두리(border) 너비(두께)를 반환하거나 설정한다.

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

: (속성 문자열)
스타일 속성은 개체의 오른쪽 테두리 너비(두께)를 나타내는 문자열이다.

medium 디폴트이며, 테두리가 중간 상태이다.
thin 테두리가 얇은 상태이다.
thick 테두리가 두꺼운 상태이다.
(너비) 부동소수점수치 다음에 cm, mm, in, pt, pcpx 등 길이 단위가 따르는 절대 길이, 혹은 em or ex 등의 단위가 따르는 상대 길이이다. CSS 길이단위를 참조하라.

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

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

특기

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

적용
개체scriptCSS IE 버전
참조
border borderRight borderRightColor borderRightStyle borderRightWidth

이 속성은 CSS1(Cascading Style Sheets, Level 1)에서 정의되었다.



결과 표시창
<STYLE>
.border1Class { border-right:10px groove pink }
.border2Class { border-right-width:20px;border-right-style:outset}
.border3Class { border-right-width:20;border-right-style:solid;border-right-color:red }
.border4Class { border-right:10px double pink }
.border5Class { border-width:5 10 15 20;border-style:solid dotted;border-color:pink }
.noborderClass { border-right:none }
button {width:110;margin:2}
</STYLE>
<SCRIPT>
function showAll(){
  str='tdObj.className='+tdObj.className+'<BR>';
  str+='tdObj.currentStyle.borderRightWidth='+tdObj.currentStyle.borderRightWidth+'<BR>';
  str+='tdObj.currentStyle.borderRightStyle='+tdObj.currentStyle.borderRightStyle+'<BR>';
  str+='tdObj.currentStyle.borderRightColor='+tdObj.currentStyle.borderRightColor+'<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>