JavaScript에서 요소의 오른쪽 테두리 관련 모든 속성을 설정하려면 borderRight 속성을 사용하면 됩니다. 이 속성을 활용하면 테두리의 색상(color), 스타일(style), 두께(width)를 별도로 지정하지 않고 하나의 선언으로 동시에 설정할 수 있습니다.
사용 방법
borderRight 속성은 CSS의 border-right 단축 속성과 동일한 형식으로 값을 지정합니다. 값의 순서는 두께, 스타일, 색상 순이며, 아래와 같이 style 객체를 통해 접근합니다.
document.getElementById("요소ID").style.borderRight = "두께 스타일 색상";예제
다음 코드를 실행하면 버튼 클릭 시 박스의 오른쪽 테두리가 검은색 굵은 실선으로 변경되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid gray;
width: 300px;
height: 200px
}
</style>
</head>
<body>
<div id="box">Demo Text</div>
<br><br>
<button type="button" onclick="display()">오른쪽 테두리 변경</button>
<script>
function display() {
document.getElementById("box").style.borderRight = "thick solid #000000";
}
</script>
</body>
</html>위 예제에서는 초기 상태의 박스가 회색 굵은 실선 테두리를 가지고 있으며, 버튼을 클릭하면 display() 함수가 실행되어 오른쪽 테두리만 thick solid #000000(굵은 실선, 검정색)으로 변경됩니다. 이처럼 borderRight 속성 하나만으로 색상, 스타일, 두께를 개별적으로 설정하는 번거로움 없이 간편하게 처리할 수 있습니다.