HTML 요소의 테두리 스타일을 변경하려면 JavaScript의 borderStyle 속성을 사용하면 됩니다. 이 속성은 CSS의 border-style 속성에 대응하며, 실선(solid), 점선(dotted), 파선(dashed) 등 다양한 테두리 스타일을 동적으로 지정할 수 있습니다.
borderStyle 속성에 사용할 수 있는 값
element.style.borderStyle 형태로 접근하며, 다음과 같은 값들을 설정할 수 있습니다.
- solid — 기본 실선
- dotted — 점선
- dashed — 파선
- double — 이중선
- groove / ridge / inset / outset — 입체감이 있는 테두리
- none / hidden — 테두리 숨기기
예제 코드
아래 예제는 버튼을 클릭하면 div 요소의 테두리 스타일이 'dashed(파선)'로 변경되는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#newDiv {
height: 150px;
width: 150px;
border: 2px solid #000000;
}
</style>
<body>
<div id="newDiv">
Demo Content!
</div>
<br>
<button type="button" onclick="display()">Change border style</button>
<script>
function display() {
document.getElementById("newDiv").style.borderStyle = "dashed";
}
</script>
</body>
</html>
코드 설명
버튼을 클릭하면 display() 함수가 실행됩니다. 이 함수는 document.getElementById("newDiv")로 해당 요소를 가져온 후, style.borderStyle 속성을 "dashed"로 설정합니다. 그 결과 원래 실선이던 테두리가 즉시 파선으로 바뀌는 것을 확인할 수 있습니다.
이처럼 borderStyle 속성을 활용하면 별도의 CSS 클래스를 추가하지 않고도 사용자 인터랙션에 따라 요소의 테두리 스타일을 간편하게 제어할 수 있습니다.