JavaScript에서 요소의 상단 테두리(top border) 색상을 변경하려면 borderTopColor 속성을 사용하면 됩니다. 이 속성은 CSS의 border-top-color와 동일한 역할을 하며, 원하는 색상 값을 지정하여 동적으로 테두리 색상을 바꿀 수 있습니다.
borderTopColor 속성이란?
borderTopColor는 DOM 요소의 인라인 스타일(style 객체)에 접근하여 상단 테두리의 색상만 별도로 변경할 수 있는 속성입니다. 색상 값은 색상 이름(예: green, red), HEX 코드(예: #00ff00), RGB/RGBA 값 등 CSS에서 허용되는 모든 형식으로 지정할 수 있습니다.
기본 사용 문법
document.getElementById("요소ID").style.borderTopColor = "색상값";예제 코드
아래 예제는 회색 테두리가 적용된 박스가 있고, 버튼을 클릭하면 JavaScript를 통해 상단 테두리 색상이 초록색(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.borderTopColor = "green";
}
</script>
</body>
</html>코드 설명
1. HTML 구조: #box라는 ID를 가진 div 요소에 border: thick solid gray; 스타일이 적용되어 두껍고 단선인 회색 테두리가 만들어집니다.
2. 버튼 클릭 이벤트: 버튼의 onclick 속성에 연결된 display() 함수가 호출됩니다.
3. 색상 변경: 함수 내부에서 document.getElementById("box")로 해당 요소를 선택한 뒤, style.borderTopColor = "green"을 통해 상단 테두리만 초록색으로 즉시 변경합니다.
다양한 색상 값 활용하기
색상 이름 외에도 다음과 같은 방식으로 값을 지정할 수 있습니다.
// HEX 코드 사용 element.style.borderTopColor = "#3498db"; // RGB 값 사용 element.style.borderTopColor = "rgb(52, 152, 219)"; // RGBA(투명도 포함) 사용 element.style.borderTopColor = "rgba(52, 152, 219, 0.5)";
이처럼 borderTopColor 속성 하나만으로도 상단 테두리 색상을 자유롭게 제어할 수 있으며, 버튼 클릭, 마우스 오버 등 다양한 이벤트와 조합하여 동적인 UI 효과를 쉽게 구현할 수 있습니다.