HTML DOM의 borderRightWidth 속성은 요소의 오른쪽 테두리 두께를 가져오거나 설정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로도 요소의 오른쪽 경계선 두께를 동적으로 변경할 수 있습니다.
문법(Syntax)
borderRightWidth 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderRightWidth = "thin|medium|thick|length|initial|inherit"
속성 값(Property Values)
borderRightWidth 속성에 사용할 수 있는 값들은 아래와 같습니다.
| 값 | 설명 |
|---|---|
| thin | 얇은 테두리를 지정합니다. |
| medium | 중간 두께의 테두리를 지정합니다. 기본값(default)입니다. |
| thick | 두꺼운 테두리를 지정합니다. |
| length | px, em 등 길이 단위로 테두리 두께를 직접 지정합니다. |
| initial | 속성을 기본(initial) 값으로 되돌립니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
예제(Example)
다음 예제는 버튼 클릭 시 div 요소의 오른쪽 테두리 두께가 변경되는 모습을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-right-width: 30px;
}
</style>
<script>
function changeRightWidth(){
document.getElementById("DIV1").style.borderRightWidth = "1px";
document.getElementById("Sample").innerHTML = "오른쪽 테두리 두께가 줄어들었습니다";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>아래 버튼을 클릭하여 위 div의 오른쪽 테두리 두께를 변경해 보세요</p>
<button onclick="changeRightWidth()">오른쪽 두께 변경</button>
<p id="Sample"></p>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 처음에는 오른쪽 테두리가 30px 두께로 표시됩니다.
"오른쪽 두께 변경" 버튼을 클릭하면 자바스크립트 함수가 실행되어 오른쪽 테두리 두께가 1px로 즉시 줄어들고, 결과 메시지가 화면에 출력됩니다.
정리
borderRightWidth 속성은 CSS의 border-right-width와 동일한 역할을 하며, 자바스크립트에서 실시간으로 스타일을 조작할 때 유용하게 사용됩니다. thin, medium, thick 같은 키워드 값뿐 아니라 px 단위의 숫자 값도 지원하므로, 상황에 맞게 활용하면 됩니다.