JavaScript에서 요소의 오른쪽 테두리 너비를 설정하려면 borderRightWidth 속성을 사용합니다. 이 속성에 원하는 값을 지정하면 오른쪽 테두리의 두께를 손쉽게 조절할 수 있습니다.
설정 가능한 값
borderRightWidth 속성에는 thin, medium, thick과 같은 키워드를 사용하거나, px, em 등의 단위를 포함한 구체적인 길이 값을 지정할 수 있습니다.
예제
아래 코드를 실행해 보면 버튼을 클릭했을 때 JavaScript로 오른쪽 테두리 너비가 변경되는 과정을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid blue;
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.borderRightWidth = "10px";
}
</script>
</body>
</html>
위 예제에서 display() 함수가 호출되면 getElementById()로 box 요소를 가져온 뒤, style.borderRightWidth에 "10px"을 할당하여 오른쪽 테두리의 너비가 즉시 변경됩니다.