자바스크립트로 요소의 하단 테두리 색상을 변경하려면 borderBottomColor 속성을 사용하면 됩니다. 이 속성은 요소 테두리 중 아래쪽 부분의 색상만 개별적으로 지정할 수 있도록 해주며, 나머지 테두리에는 영향을 주지 않습니다.
기본 사용법
borderBottomColor는 DOM 요소의 style 객체를 통해 접근하며, CSS에서 지원하는 모든 색상 값(색상 이름, HEX 코드, RGB/RGBA 값 등)을 사용할 수 있습니다.
document.getElementById("요소ID").style.borderBottomColor = "색상값";예제 코드
아래 예제는 파란색 점선 테두리가 적용된 박스에서 버튼을 클릭하면 하단 테두리 색상만 노란색으로 변경하는 코드입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px dashed blue;
width: 120px;
height: 120px;
}
</style>
</head>
<body>
<button onclick="display()">하단 테두리 색상 변경</button>
<div id="box">
<p>데모 텍스트</p>
<p>데모 텍스트</p>
</div>
<script>
function display() {
document.getElementById("box").style.borderBottomColor = "yellow";
}
</script>
</body>
</html>코드 설명
위 코드의 핵심 동작은 다음과 같습니다.
1. 초기 스타일 설정: CSS에서 #box 요소에 border: 2px dashed blue;를 적용해 네 면 모두 파란색 점선 테두리를 만듭니다.
2. 버튼 클릭 이벤트: 버튼에 onclick="display()"를 연결해 클릭 시 자바스크립트 함수가 호출되도록 합니다.
3. 하단 테두리 색상 변경: display() 함수 내부에서 style.borderBottomColor = "yellow"를 실행하여 하단 테두리만 노란색으로 바뀌고, 위·왼쪽·오른쪽 테두리는 그대로 유지됩니다.
다양한 색상 값 활용하기
색상 이름 대신 다른 형식의 값도 사용할 수 있습니다.
// HEX 코드 사용
element.style.borderBottomColor = "#ff5733";
// RGB 값 사용
element.style.borderBottomColor = "rgb(255, 87, 51)";
// RGBA(투명도 포함) 사용
element.style.borderBottomColor = "rgba(255, 87, 51, 0.5)";이처럼 borderBottomColor 속성을 활용하면 특정 상황에서 하단 테두리만 강조하거나, 사용자 인터랙션에 따라 동적으로 스타일을 변경하는 UI를 손쉽게 구현할 수 있습니다.