웹 개발 중 요소의 오른쪽 테두리 색상만 동적으로 변경하고 싶다면, JavaScript의 borderRightColor 속성을 사용하면 됩니다. 이 속성은 CSS의 border-right-color와 동일한 역할을 하며, DOM 요소의 style 객체를 통해 간단하게 접근할 수 있습니다.
borderRightColor 속성이란?
borderRightColor는 HTMLElement의 style 객체에서 제공하는 속성으로, 특정 요소의 오른쪽 테두리 색상을 지정합니다. 색상 값은 다음과 같은 형식으로 설정할 수 있습니다.
- 색상 이름: green, red, blue 등
- HEX 코드: #008000, #ff0000 등
- RGB/RGBA 값: rgb(0, 128, 0), rgba(0, 128, 0, 0.5) 등
기본 사용법
아래와 같이 getElementById로 요소를 선택한 후 style.borderRightColor에 원하는 색상 값을 할당하면 됩니다.
document.getElementById("box").style.borderRightColor = "green";실전 예제: 버튼 클릭으로 테두리 색상 변경하기
버튼을 클릭하면 박스의 오른쪽 테두리 색상이 초록색으로 바뀌는 예제입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid gray;
}
</style>
</head>
<body>
<div id="box">데모 텍스트</div>
<br><br>
<button type="button" onclick="display()">오른쪽 테두리 색상 변경</button>
<script>
function display() {
document.getElementById("box").style.borderRightColor = "green";
}
</script>
</body>
</html>코드 설명
- CSS 스타일: #box 요소에 thick solid gray 스타일의 테두리를 미리 적용해 둡니다.
- 버튼 이벤트: onclick 속성으로 display() 함수를 호출합니다.
- 스타일 변경: display() 함수 내에서 borderRightColor 속성에 "green"을 할당하여 오른쪽 테두리 색상만 즉시 변경합니다.
참고: 관련 테두리 속성들
오른쪽 테두리와 함께 자주 사용되는 유사한 속성들도 알아두면 유용합니다.
- borderTopColor: 위쪽 테두리 색상 설정
- borderBottomColor: 아래쪽 테두리 색상 설정
- borderLeftColor: 왼쪽 테두리 색상 설정
- borderColor: 네 방향 테두리 색상 한 번에 설정
이처럼 borderRightColor 속성을 활용하면 별도의 CSS 클래스를 추가하지 않고도 JavaScript만으로 특정 방향의 테두리 색상을 손쉽게 제어할 수 있습니다.