JavaScript에서 HTML 요소의 오른쪽 테두리(right border) 스타일을 변경하고 싶다면 borderRightStyle 속성을 사용하면 됩니다. 이 속성은 CSS의 border-right-style 속성에 대응하며, 버튼 클릭이나 특정 이벤트 발생 시 동적으로 테두리 모양을 바꿀 때 유용합니다.
기본 사용법
문법은 매우 간단합니다. 대상 요소를 선택한 뒤 style 객체의 borderRightStyle 속성에 원하는 테두리 스타일 값을 할당하면 됩니다.
document.getElementById("요소ID").style.borderRightStyle = "dashed";예제 코드
아래 예제는 회색 실선 테두리가 적용된 박스가 있으며, 버튼을 클릭하면 JavaScript를 통해 오른쪽 테두리가 점선(dashed)으로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid gray;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="box">Demo Text</div>
<br><br>
<button type="button" onclick="display()">오른쪽 테두리 스타일 변경</button>
<script>
function display() {
document.getElementById("box").style.borderRightStyle = "dashed";
}
</script>
</body>
</html>사용할 수 있는 주요 값
borderRightStyle 속성에는 다음과 같은 값들을 지정할 수 있습니다.
- solid — 일반적인 실선
- dashed — 긴 점선(대시) 형태
- dotted — 촘촘한 점 형태
- double — 두 줄의 실선
- groove / ridge — 입체적인 홈 또는 융기 느낌의 테두리
- inset / outset — 안쪽 또는 바깥쪽으로 파인 입체 효과
- none / hidden — 테두리 숨김
버튼 클릭 시 오른쪽 테두리만 점선으로 바뀌는 것을 확인할 수 있으며, 같은 방식으로 왼쪽(borderLeftStyle), 위쪽(borderTopStyle), 아래쪽(borderBottomStyle) 테두리도 개별적으로 제어할 수 있습니다.