JavaScript에서 HTML 요소의 왼쪽 테두리 색상을 변경하려면 borderLeftColor 속성을 사용하면 됩니다. 이 속성은 CSS의 border-left-color에 대응하며, 여기에 원하는 색상 값을 할당하면 해당 요소의 왼쪽 테두리 색상이 즉시 변경됩니다.
색상 값은 green처럼 색상 이름으로 지정할 수도 있고, #008000 같은 HEX 코드나 rgb(0, 128, 0) 형식의 RGB 값으로도 지정할 수 있습니다.
예제
아래 코드를 실행하면 버튼을 클릭했을 때 박스의 왼쪽 테두리 색상이 초록색으로 바뀌는 것을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid gray;
}
</style>
</head>
<body>
<div id="box">Demo Text</div>
<br><br>
<button type="button" onclick="display()">왼쪽 테두리 색상 변경</button>
<script>
function display() {
document.getElementById("box").style.borderLeftColor = "green";
}
</script>
</body>
</html>코드 설명
- CSS 스타일:
#box선택자를 통해 두괄 회색(solid gray) 테두리를 미리 적용해 초기 상태를 만듭니다. - 버튼 클릭 이벤트:
onclick속성으로display()함수가 호출되도록 연결합니다. - 색상 변경 로직:
document.getElementById("box")로 요소를 가져온 뒤,style.borderLeftColor에"green"을 할당하여 왼쪽 테두리만 초록색으로 변경합니다.
이처럼 borderLeftColor 속성을 활용하면 전체 테두리가 아닌 왼쪽 테두리의 색상만 선택적으로 동적으로 제어할 수 있어, 강조 효과나 상태 표시 등 다양한 UI 인터랙션에 유용하게 활용됩니다.