borderTopStyle 속성으로 상단 테두리 스타일 지정하기
JavaScript에서 요소의 상단 테두리(top border) 스타일을 설정하려면 borderTopStyle 속성을 사용합니다. 이 속성을 활용하면 버튼 클릭 같은 사용자 이벤트에 반응하여 테두리 모양을 동적으로 변경할 수 있습니다.
주요 사용 가능한 값
borderTopStyle 속성에는 다음과 같은 값을 지정할 수 있습니다.
- dashed — 파선 형태의 테두리
- dotted — 점선 형태의 테두리
- solid — 실선 형태의 테두리
- double — 이중 실선 테두리
- none 또는 hidden — 테두리를 표시하지 않음
예제
다음 예제 코드를 실행해 보세요. 버튼을 클릭하면 상자의 상단 테두리가 기존의 solid(실선)에서 dashed(파선)로 변경되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid gray;
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.borderTopStyle = "dashed";
}
</script>
</body>
</html>코드 설명
위 예제의 핵심은 다음 한 줄입니다.
document.getElementById("box").style.borderTopStyle = "dashed";getElementById() 메서드로 id가 box인 요소를 가져온 뒤, 해당 요소의 style.borderTopStyle 값에 원하는 테두리 스타일을 할당하면 즉시 화면에 반영됩니다. 이 방식은 CSS를 미리 정의하지 않고도 JavaScript만으로 테두리 스타일을 제어해야 하는 인터랙티브한 UI를 만들 때 유용하게 활용됩니다.